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}
+
diff --git a/examples/with-react-intl/components/Nav.tsx b/examples/with-react-intl/components/Nav.tsx
index fd1fa96e9e52a..d90d91c059481 100644
--- a/examples/with-react-intl/components/Nav.tsx
+++ b/examples/with-react-intl/components/Nav.tsx
@@ -30,7 +30,7 @@ export default function Nav() {
- {locales.map((availableLocale) => (
+ {locales?.map((availableLocale) => (
-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`).then(
+ (module) => module.default
+ )
+ } catch (error) {
+ throw new Error(
+ '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/package.json b/examples/with-react-intl/package.json
index 9d32be5fc21a7..6d27fb253eb93 100644
--- a/examples/with-react-intl/package.json
+++ b/examples/with-react-intl/package.json
@@ -11,17 +11,17 @@
"i18n:compile": "formatjs compile-folder lang compiled-lang"
},
"dependencies": {
- "next": "11.1.0",
- "react": "17.0.2",
- "react-dom": "17.0.2",
- "react-intl": "5.20.9"
+ "next": "latest",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-intl": "6.1.1"
},
"devDependencies": {
- "@formatjs/cli": "4.2.31",
- "@types/node": "16.6.2",
- "@types/react": "17.0.19",
- "babel-plugin-formatjs": "10.3.5",
- "eslint-plugin-formatjs": "2.17.4",
- "typescript": "4.3.5"
+ "@formatjs/cli": "5.1.0",
+ "@types/node": "18.7.23",
+ "@types/react": "18.0.21",
+ "babel-plugin-formatjs": "10.3.28",
+ "eslint-plugin-formatjs": "4.3.1",
+ "typescript": "4.8.4"
}
}
diff --git a/examples/with-react-intl/pages/_app.tsx b/examples/with-react-intl/pages/_app.tsx
index 030db24b24c72..d8b80a482081c 100644
--- a/examples/with-react-intl/pages/_app.tsx
+++ b/examples/with-react-intl/pages/_app.tsx
@@ -1,12 +1,16 @@
import type { AppProps } from 'next/app'
+import type { MessageConfig } from '../helper/loadIntlMessages'
import { IntlProvider } from 'react-intl'
import { useRouter } from 'next/router'
-export default function MyApp({ Component, pageProps }: AppProps) {
+export default function MyApp({
+ Component,
+ pageProps,
+}: AppProps<{ intlMessages: MessageConfig }>) {
const { locale, defaultLocale } = useRouter()
return (
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 (