From cae96f27ec53cd42e992a748b9727852df9247c5 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Fri, 30 Sep 2022 21:39:51 +0200 Subject: [PATCH] chore: update with-react-intl example (#40999) ## Changes see commits ## Additional Info Since this example is quite complex I tried to remove additional noise (unused type inference). ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) ## Related Closes: #40975 --- examples/with-react-intl/.gitignore | 3 ++ examples/with-react-intl/.npmrc | 1 + .../with-react-intl/.vscode/settings.json | 3 -- .../with-react-intl/components/Layout.tsx | 30 +++++++-------- examples/with-react-intl/components/Nav.tsx | 2 +- .../helper/loadIntlMessages.ts | 38 ++++++------------- examples/with-react-intl/package.json | 20 +++++----- examples/with-react-intl/pages/_app.tsx | 8 +++- examples/with-react-intl/pages/about.tsx | 15 ++++---- examples/with-react-intl/pages/index.tsx | 15 ++++---- examples/with-react-intl/tsconfig.json | 2 +- 11 files changed, 65 insertions(+), 72 deletions(-) create mode 100644 examples/with-react-intl/.npmrc delete mode 100644 examples/with-react-intl/.vscode/settings.json diff --git a/examples/with-react-intl/.gitignore b/examples/with-react-intl/.gitignore index a900ed2c9eaf9..46278d1684cee 100644 --- a/examples/with-react-intl/.gitignore +++ b/examples/with-react-intl/.gitignore @@ -35,3 +35,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# i18n +compiled-lang \ No newline at end of file diff --git a/examples/with-react-intl/.npmrc b/examples/with-react-intl/.npmrc new file mode 100644 index 0000000000000..6c59086d86251 --- /dev/null +++ b/examples/with-react-intl/.npmrc @@ -0,0 +1 @@ +enable-pre-post-scripts=true diff --git a/examples/with-react-intl/.vscode/settings.json b/examples/with-react-intl/.vscode/settings.json deleted file mode 100644 index ad92582bd0913..0000000000000 --- a/examples/with-react-intl/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "editor.formatOnSave": true -} diff --git a/examples/with-react-intl/components/Layout.tsx b/examples/with-react-intl/components/Layout.tsx index 2110228a22514..ae0a719f27262 100644 --- a/examples/with-react-intl/components/Layout.tsx +++ b/examples/with-react-intl/components/Layout.tsx @@ -1,4 +1,4 @@ -import { ReactChild } from 'react' +import { ReactNode } from 'react' import { useIntl } from 'react-intl' import Head from 'next/head' import Nav from './Nav' @@ -6,27 +6,27 @@ import Nav from './Nav' interface LayoutProps { title?: string description?: string - children: ReactChild | ReactChild[] + children: ReactNode } export default function Layout({ title, description, children }: LayoutProps) { const intl = useIntl() + + title ||= intl.formatMessage({ + defaultMessage: 'React Intl Next.js Example', + description: 'Default document title', + }) + + description ||= intl.formatMessage({ + defaultMessage: 'This page is powered by Next.js', + description: 'Default document description', + }) + return ( <> - - - {title || - intl.formatMessage({ - defaultMessage: 'React Intl Next.js Example', - description: 'Default document title', - })} - {description || - intl.formatMessage({ - defaultMessage: 'This page is powered by Next.js', - description: 'Default document description', - })} - + {title} +