examples: update app-dir-i18n-routing to v15 (#72636)

samcx · web-flow · commit 151d07e14872 · 2024-11-12T14:29:36.000-08:00
## Why? The example `app-dir-i18n-routing` needs to be updated to v15. ## How? Run the `next-async-request-api` codemod: ``` pnpm dlx @next/codemod@latest next-async-request-api . ``` - Fixes #72630
diff --git a/examples/app-dir-i18n-routing/app/[lang]/layout.tsx b/examples/app-dir-i18n-routing/app/[lang]/layout.tsx
@@ -1,24 +1,25 @@
 import { i18n, type Locale } from "../../i18n-config";
 
+export const metadata = {
+  title: "i18n within app directory - Vercel Examples",
+  description: "How to do i18n in Next.js 13 within app directory",
+};
+
 export async function generateStaticParams() {
   return i18n.locales.map((locale) => ({ lang: locale }));
 }
 
-export default function Root({
-  children,
-  params,
-}: {
+export default async function Root(props: {
   children: React.ReactNode;
-  params: { lang: Locale };
+  params: Promise<{ lang: Locale }>;
 }) {
+  const params = await props.params;
+
+  const { children } = props;
+
   return (
     <html lang={params.lang}>
       <body>{children}</body>
     </html>
   );
 }
-
-export const metadata = {
-  title: "i18n within app directory - Vercel Examples",
-  description: "How to do i18n in Next.js 13 within app directory",
-};
diff --git a/examples/app-dir-i18n-routing/app/[lang]/page.tsx b/examples/app-dir-i18n-routing/app/[lang]/page.tsx
@@ -3,11 +3,11 @@ import { Locale } from "../../i18n-config";
 import Counter from "./components/counter";
 import LocaleSwitcher from "./components/locale-switcher";
 
-export default async function IndexPage({
-  params: { lang },
-}: {
-  params: { lang: Locale };
+export default async function IndexPage(props: {
+  params: Promise<{ lang: Locale }>;
 }) {
+  const { lang } = await props.params;
+
   const dictionary = await getDictionary(lang);
 
   return (
diff --git a/examples/app-dir-i18n-routing/package.json b/examples/app-dir-i18n-routing/package.json
@@ -1,23 +1,23 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "0.2.32",
-    "negotiator": "0.6.3",
+    "@formatjs/intl-localematcher": "0.5.7",
+    "negotiator": "1.0.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "server-only": "0.0.1"
   },
   "devDependencies": {
-    "@types/negotiator": "0.6.1",
-    "@types/node": "^18.11.5",
+    "@types/negotiator": "0.6.3",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
-    "typescript": "^4.8.4"
+    "typescript": "^5.6.3"
   }
 }
