feat: setup i18n

AmbossTech · Jul 4, 2024 · ae96919 · ae96919
1 parent 5f305bc
commit ae96919
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 19 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,8 @@
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,8 @@
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}
diff --git a/messages/en.json b/messages/en.json
@@ -0,0 +1 @@
+{}
diff --git a/messages/es.json b/messages/es.json
@@ -0,0 +1 @@
+{}
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,3 +1,7 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
@@ -40,4 +44,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "lucide-react": "^0.395.0",
     "lwk_wasm": "^0.6.3",
     "next": "^14.2.4",
+    "next-intl": "^3.15.3",
     "next-qrcode": "^2.5.1",
     "next-themes": "^0.3.0",
     "nostr-tools": "^2.7.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { Noto_Sans } from 'next/font/google';
 import { cookies } from 'next/headers';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
 
 import { Toaster } from '@/components/ui/toaster';
 import { ApolloWrapper } from '@/lib/apollo/wrapper';
@@ -17,7 +19,7 @@ export const metadata: Metadata = {
   description: 'Banco',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
@@ -29,24 +31,29 @@ export default function RootLayout({
   const accessToken = cookieStore.get('amboss_banco_access_token')?.value;
   const refreshToken = cookieStore.get('amboss_banco_refresh_token')?.value;
 
+  const locale = await getLocale();
+  const messages = await getMessages();
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body className={font.className}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <ApolloWrapper
-            serverUrl={serverUrl}
-            accessToken={accessToken}
-            refreshToken={refreshToken}
+        <NextIntlClientProvider messages={messages}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
           >
-            {children}
-            <Toaster />
-          </ApolloWrapper>
-        </ThemeProvider>
+            <ApolloWrapper
+              serverUrl={serverUrl}
+              accessToken={accessToken}
+              refreshToken={refreshToken}
+            >
+              {children}
+              <Toaster />
+            </ApolloWrapper>
+          </ThemeProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -0,0 +1,32 @@
+import { cookies, headers } from 'next/headers';
+import { getRequestConfig } from 'next-intl/server';
+
+type SupportedLanguage = 'en' | 'es';
+const defaultLocale = 'en';
+
+export default getRequestConfig(async () => {
+  let locale: SupportedLanguage;
+
+  const cookieStore = cookies();
+  const localeCookie = cookieStore.get('locale') as
+    | SupportedLanguage
+    | undefined;
+
+  const headersList = headers();
+  const localeHeader = headersList.get('Accept-Language');
+
+  if (localeCookie) {
+    locale = localeCookie;
+  } else if (localeHeader?.includes('es')) {
+    locale = 'es';
+  } else if (localeHeader?.includes('en')) {
+    locale = 'en';
+  } else {
+    locale = defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -21,6 +21,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "global.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }