From 69175448e1a3197ade806dc15c0ca5f5e0872569 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Wed, 28 Sep 2022 17:35:00 +0200 Subject: [PATCH 01/10] Ignore compiled languages --- examples/with-react-intl/.gitignore | 3 +++ 1 file changed, 3 insertions(+) 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 From f6b43f41b790529a27b66574c0e5d31bdd78f75e Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Wed, 28 Sep 2022 17:40:33 +0200 Subject: [PATCH 02/10] Make loadI18nMessages edge compatible --- .../helper/loadIntlMessages.ts | 40 +++++++------------ examples/with-react-intl/pages/about.tsx | 15 +++---- examples/with-react-intl/pages/index.tsx | 15 +++---- 3 files changed, 30 insertions(+), 40 deletions(-) diff --git a/examples/with-react-intl/helper/loadIntlMessages.ts b/examples/with-react-intl/helper/loadIntlMessages.ts index c1ed1e626263e..559dddb548e0c 100644 --- a/examples/with-react-intl/helper/loadIntlMessages.ts +++ b/examples/with-react-intl/helper/loadIntlMessages.ts @@ -1,35 +1,23 @@ -import fs from 'fs/promises' -import path from 'path' +export type MessageConfig = Record -type LoadI18nMessagesProps = { - locale: string - defaultLocale: string -} - -type MessageConfig = { [key: string]: string } - -export default async function loadI18nMessages({ - locale, - defaultLocale, -}: LoadI18nMessagesProps): Promise { +export default async function loadI18nMessages( + locale: string, + defaultLocale = 'en' +) { // If the default locale is being used we can skip it if (locale === defaultLocale) { return {} } - if (locale !== defaultLocale) { - const languagePath = path.join( - process.cwd(), - `compiled-lang/${locale}.json` + try { + return import(`compiled-lang/${locale}.json`, { + assert: { + type: 'json', + }, + }).then((module) => module.default) + } catch (error) { + console.info( + 'Could not load compiled language files. Please run "npm run i18n:compile" first"' ) - try { - const contents = await fs.readFile(languagePath, 'utf-8') - return JSON.parse(contents) - } catch (error) { - console.info( - 'Could not load compiled language files. Please run "npm run i18n:compile" first"' - ) - console.error(error) - } } } diff --git a/examples/with-react-intl/pages/about.tsx b/examples/with-react-intl/pages/about.tsx index 381e994bd4c74..65b25b453ceca 100644 --- a/examples/with-react-intl/pages/about.tsx +++ b/examples/with-react-intl/pages/about.tsx @@ -1,19 +1,20 @@ +import type { GetServerSidePropsContext } from 'next' import { FormattedRelativeTime, useIntl } from 'react-intl' -import Layout from '../components/Layout' import loadIntlMessages from '../helper/loadIntlMessages' -import { InferGetStaticPropsType } from 'next' +import Layout from '../components/Layout' -export async function getStaticProps(ctx) { +export async function getStaticProps({ + locale, + defaultLocale, +}: GetServerSidePropsContext) { return { props: { - intlMessages: await loadIntlMessages(ctx), + intlMessages: await loadIntlMessages(locale as string, defaultLocale), }, } } -type AboutPageProps = InferGetStaticPropsType - -export default function AboutPage(props: AboutPageProps) { +export default function AboutPage() { const intl = useIntl() return ( - -export default function HomePage(props: HomePageProps) { +export default function IndexPage() { const intl = useIntl() return ( Date: Wed, 28 Sep 2022 17:41:19 +0200 Subject: [PATCH 03/10] Fix type issues - ReactChild is deprecated - description should be a meta tag - locales can be null --- .../with-react-intl/components/Layout.tsx | 29 ++++++++++--------- examples/with-react-intl/components/Nav.tsx | 2 +- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/examples/with-react-intl/components/Layout.tsx b/examples/with-react-intl/components/Layout.tsx index 2110228a22514..24905da88a326 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,28 @@ 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} + {description && }