Wording fixes and streamline examples

amannn · Dec 21, 2023 · 043df19 · 043df19
1 parent 390ecd0
commit 043df19
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 39 deletions.
diff --git a/docs/pages/docs/routing/middleware.mdx b/docs/pages/docs/routing/middleware.mdx
@@ -630,7 +630,7 @@ To recover from this error, please make sure that:
 1. You've [set up the middleware](/docs/getting-started/app-router#middlewarets).
 2. You're using APIs from `next-intl` (including [the navigation APIs](/docs/routing/navigation)) exclusively within the `locale` segment.
 3. Your [middleware matcher](#matcher-config) matches all routes of your application, including dynamic segments with potentially unexpected characters like dots (e.g. `/users/jane.doe`).
-4. If you're using [`localePrefix: 'as-needed'`](#locale-prefix-as-needed), the `locale` segment effectively acts like a catch-all for all unknown routes. You should make sure that `params.locale` is [validated](/docs/getting-started/app-router#applocalelayouttsx) before it's used by any APIs from `next-intl`.
-5. To implement static rendering properly, make sure to [provide a static locale](/docs/getting-started/app-router#static-rendering) to `next-intl`.
+4. If you're using [`localePrefix: 'as-needed'`](#locale-prefix-as-needed), the `locale` segment effectively acts like a catch-all for all unknown routes. You should make sure that `params.locale` is [validated](/docs/usage/configuration#i18nts) before it's used by any APIs from `next-intl`.
+5. To implement static rendering, make sure to [provide a static locale](/docs/getting-started/app-router#static-rendering) to `next-intl` instead of using `force-static`.
 
-Note that `next-intl` will print this warning only during development and will invoke the `notFound()` function to abort the render.
+Note that `next-intl` will print this warning only during development and will invoke the `notFound()` function to abort the render. You should consider adding [a `not-found` page](/docs/environments/error-files#not-foundjs) due to this.
diff --git a/examples/example-app-router-migration/src/app/[locale]/layout.tsx b/examples/example-app-router-migration/src/app/[locale]/layout.tsx
@@ -1,20 +1,15 @@
-/* eslint-disable @next/next/no-head-element */
-import {useLocale} from 'next-intl';
 import {ReactNode} from 'react';
 
 type Props = {
   children: ReactNode;
   params: {locale: string};
 };
 
-export default async function LocaleLayout({children}: Props) {
-  const locale = useLocale();
-
+export default async function LocaleLayout({children, params}: Props) {
   return (
-    <html lang={locale}>
+    <html lang={params.locale}>
       <head>
         <title>next-intl</title>
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
       </head>
       <body>{children}</body>
     </html>

diff --git a/examples/example-app-router-migration/src/app/layout.tsx b/examples/example-app-router-migration/src/app/layout.tsx
@@ -0,0 +1,11 @@
+import {ReactNode} from 'react';
+
+type Props = {
+  children: ReactNode;
+};
+
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+export default function RootLayout({children}: Props) {
+  return children;
+}
diff --git a/examples/example-app-router-migration/src/app/not-found.tsx b/examples/example-app-router-migration/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import Error from 'next/error';
+
+// Render the default Next.js 404 page when a route
+// is requested that doesn't match the middleware and
+// therefore doesn't have a locale associated with it.
+
+export default function NotFound() {
+  return (
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/example-app-router-migration/src/i18n.ts b/examples/example-app-router-migration/src/i18n.ts
@@ -1,5 +1,12 @@
+import {notFound} from 'next/navigation';
 import {getRequestConfig} from 'next-intl/server';
+import {locales} from './navigation';
 
-export default getRequestConfig(async ({locale}) => ({
-  messages: (await import(`../messages/${locale}.json`)).default
-}));
+export default getRequestConfig(async ({locale}) => {
+  // Validate that the incoming `locale` parameter is valid
+  if (!locales.includes(locale as any)) notFound();
+
+  return {
+    messages: (await import(`../messages/${locale}.json`)).default
+  };
+});
diff --git a/examples/example-app-router-next-auth/src/app/[locale]/layout.tsx b/examples/example-app-router-next-auth/src/app/[locale]/layout.tsx
@@ -1,22 +1,13 @@
-import {notFound} from 'next/navigation';
-import {NextIntlClientProvider} from 'next-intl';
+import {NextIntlClientProvider, useMessages} from 'next-intl';
 import {ReactNode} from 'react';
 
 type Props = {
   children: ReactNode;
   params: {locale: string};
 };
 
-export default async function LocaleLayout({
-  children,
-  params: {locale}
-}: Props) {
-  let messages;
-  try {
-    messages = (await import(`../../../messages/${locale}.json`)).default;
-  } catch (error) {
-    notFound();
-  }
+export default function LocaleLayout({children, params: {locale}}: Props) {
+  const messages = useMessages();
 
   return (
     <html lang={locale}>

diff --git a/examples/example-app-router-next-auth/src/app/layout.tsx b/examples/example-app-router-next-auth/src/app/layout.tsx
@@ -4,9 +4,8 @@ type Props = {
   children: ReactNode;
 };
 
-// Even though this component is just passing its children through, the presence
-// of this file fixes an issue in Next.js 13.3.0 where link clicks that switch
-// the locale would otherwise be ignored.
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
 export default function RootLayout({children}: Props) {
   return children;
 }
diff --git a/examples/example-app-router-next-auth/src/app/not-found.tsx b/examples/example-app-router-next-auth/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import Error from 'next/error';
+
+// Render the default Next.js 404 page when a route
+// is requested that doesn't match the middleware and
+// therefore doesn't have a locale associated with it.
+
+export default function NotFound() {
+  return (
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/example-app-router-next-auth/src/i18n.ts b/examples/example-app-router-next-auth/src/i18n.ts
@@ -1,5 +1,12 @@
+import {notFound} from 'next/navigation';
 import {getRequestConfig} from 'next-intl/server';
+import {locales} from './navigation';
 
-export default getRequestConfig(async ({locale}) => ({
-  messages: (await import(`../messages/${locale}.json`)).default
-}));
+export default getRequestConfig(async ({locale}) => {
+  // Validate that the incoming `locale` parameter is valid
+  if (!locales.includes(locale as any)) notFound();
+
+  return {
+    messages: (await import(`../messages/${locale}.json`)).default
+  };
+});
diff --git a/examples/example-app-router-playground/src/app/[locale]/[...rest]/page.tsx b/examples/example-app-router-playground/src/app/[locale]/[...rest]/page.tsx
@@ -1,9 +1,5 @@
 import {notFound} from 'next/navigation';
 
 export default function CatchAll() {
-  // `not-found` currently only renders when triggered by the `notFound` function
-  // https://beta.nextjs.org/docs/api-reference/file-conventions/not-found
   notFound();
-
-  return null;
 }
diff --git a/examples/example-app-router-playground/src/app/layout.tsx b/examples/example-app-router-playground/src/app/layout.tsx
@@ -4,9 +4,8 @@ type Props = {
   children: ReactNode;
 };
 
-// Even though this component is just passing its children through, the presence
-// of this file fixes an issue in Next.js 13.4 where link clicks that switch
-// the locale would otherwise cause a full reload.
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
 export default function RootLayout({children}: Props) {
   return children;
 }
diff --git a/examples/example-app-router-playground/src/app/not-found.tsx b/examples/example-app-router-playground/src/app/not-found.tsx
@@ -2,6 +2,10 @@
 
 import Error from 'next/error';
 
+// Render the default Next.js 404 page when a route
+// is requested that doesn't match the middleware and
+// therefore doesn't have a locale associated with it.
+
 export default function NotFound() {
   return (
     <html lang="en">

diff --git a/examples/example-app-router/src/i18n.ts b/examples/example-app-router/src/i18n.ts
@@ -1,6 +1,6 @@
 import {notFound} from 'next/navigation';
 import {getRequestConfig} from 'next-intl/server';
-import {locales} from 'config';
+import {locales} from './config';
 
 export default getRequestConfig(async ({locale}) => {
   // Validate that the incoming `locale` parameter is valid