chore: Update App Router example to use NextIntlClientProvider (#1060)

amannn · web-flow · commit 0a193570273b · 2024-05-08T17:14:05.000+02:00
diff --git a/examples/example-app-router/src/app/[locale]/layout.tsx b/examples/example-app-router/src/app/[locale]/layout.tsx
@@ -1,6 +1,11 @@
 import clsx from 'clsx';
 import {Inter} from 'next/font/google';
-import {getTranslations, unstable_setRequestLocale} from 'next-intl/server';
+import {NextIntlClientProvider} from 'next-intl';
+import {
+  getMessages,
+  getTranslations,
+  unstable_setRequestLocale
+} from 'next-intl/server';
 import {ReactNode} from 'react';
 import Navigation from '@/components/Navigation';
 import {locales} from '@/config';
@@ -33,11 +38,17 @@ export default async function LocaleLayout({
   // Enable static rendering
   unstable_setRequestLocale(locale);
 
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
   return (
     <html className="h-full" lang={locale}>
       <body className={clsx(inter.className, 'flex h-full flex-col')}>
-        <Navigation />
-        {children}
+        <NextIntlClientProvider messages={messages}>
+          <Navigation />
+          {children}
+        </NextIntlClientProvider>
       </body>
     </html>
   );
