feat: add i18n support for client component and typesafety for i18n keys

ixartz · Dec 3, 2023 · 2d86247 · 2d86247
1 parent 1f43eb2
commit 2d86247
Show file tree

Hide file tree

Showing 18 changed files with 54 additions and 12 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -7,6 +7,8 @@
     "Orta.vscode-jest",
     "humao.rest-client",
     "yoavbls.pretty-ts-errors",
-    "ms-playwright.playwright"
+    "ms-playwright.playwright",
+    "github.vscode-github-actions",
+    "lokalise.i18n-ally"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,5 +23,7 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "prettier.ignorePath": ".gitignore" // Don't run prettier for files listed in .gitignore
+  "prettier.ignorePath": ".gitignore", // Don't run prettier for files listed in .gitignore
+  "i18n-ally.localesPaths": ["messages"],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@clerk/localizations": "^1.26.10",
     "@clerk/nextjs": "^4.27.2",
     "@hookform/resolvers": "^3.3.2",
     "@libsql/client": "^0.3.6",

diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
diff --git a/src/app/(auth)/(center)/layout.tsx → src/app/[locale]/(auth)/(center)/layout.tsx b/src/app/(auth)/(center)/layout.tsx → src/app/[locale]/(auth)/(center)/layout.tsx
diff --git a/.../(center)/sign-in/[[...sign-in]]/page.tsx → .../(center)/sign-in/[[...sign-in]]/page.tsx b/.../(center)/sign-in/[[...sign-in]]/page.tsx → .../(center)/sign-in/[[...sign-in]]/page.tsx
diff --git a/.../(center)/sign-up/[[...sign-up]]/page.tsx → .../(center)/sign-up/[[...sign-up]]/page.tsx b/.../(center)/sign-up/[[...sign-up]]/page.tsx → .../(center)/sign-up/[[...sign-up]]/page.tsx
diff --git a/src/app/(auth)/dashboard/layout.tsx → src/app/[locale]/(auth)/dashboard/layout.tsx b/src/app/(auth)/dashboard/layout.tsx → src/app/[locale]/(auth)/dashboard/layout.tsx
diff --git a/src/app/(auth)/dashboard/page.tsx → src/app/[locale]/(auth)/dashboard/page.tsx b/src/app/(auth)/dashboard/page.tsx → src/app/[locale]/(auth)/dashboard/page.tsx
diff --git a/...user-profile/[[...user-profile]]/page.tsx → ...user-profile/[[...user-profile]]/page.tsx b/...user-profile/[[...user-profile]]/page.tsx → ...user-profile/[[...user-profile]]/page.tsx
diff --git a/src/app/[locale]/(auth)/layout.tsx b/src/app/[locale]/(auth)/layout.tsx
@@ -0,0 +1,18 @@
+import { enUS, frFR } from '@clerk/localizations';
+import { ClerkProvider } from '@clerk/nextjs';
+
+export default function AuthLayout({
+  children, // will be a page or nested layout
+  params: { locale },
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  let clerkLocale = enUS;
+
+  if (locale === 'fr') {
+    clerkLocale = frFR;
+  }
+
+  return <ClerkProvider localization={clerkLocale}>{children}</ClerkProvider>;
+}
diff --git a/src/app/guestbook/page.tsx → src/app/[locale]/guestbook/page.tsx b/src/app/guestbook/page.tsx → src/app/[locale]/guestbook/page.tsx
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -2,6 +2,7 @@ import '@/styles/global.css';
 
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import { NextIntlClientProvider, useMessages } from 'next-intl';
 
 import { AppConfig } from '@/utils/AppConfig';
 
@@ -42,9 +43,16 @@ export default function RootLayout({
   // Validate that the incoming `locale` parameter is valid
   if (!AppConfig.locales.includes(locale)) notFound();
 
+  // Using internationalization in Client Components
+  const messages = useMessages();
+
   return (
     <html lang={locale}>
-      <body>{children}</body>
+      <body>
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
     </html>
   );
 }

diff --git a/src/app/portfolio/[slug]/page.tsx → src/app/[locale]/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx → src/app/[locale]/portfolio/[slug]/page.tsx
diff --git a/src/app/portfolio/page.tsx → src/app/[locale]/portfolio/page.tsx b/src/app/portfolio/page.tsx → src/app/[locale]/portfolio/page.tsx
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -1,5 +1,6 @@
 import { getRequestConfig } from 'next-intl/server';
 
+// Using internationalization in Server Components
 export default getRequestConfig(async ({ locale }) => ({
   messages: (await import(`../messages/${locale}.json`)).default,
 }));
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+// Use type safe message keys with `next-intl`
+type Messages = typeof import('../../messages/en.json');
+declare interface IntlMessages extends Messages {}