i18n!

ItzNxthaniel · ItzNxthaniel · commit 555218c2779c · 2024-06-05T15:47:38.000-04:00
diff --git a/lang/en-US.json b/lang/en-US.json
@@ -0,0 +1,5 @@
+{
+  "Home": {
+    "title": "Home page!"
+  }
+}
diff --git a/lang/ru-RU.json b/lang/ru-RU.json
@@ -0,0 +1,5 @@
+{
+  "Home": {
+    "title": "Главная страница"
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,8 @@
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 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
@@ -24,6 +24,7 @@
     "@tiptap/starter-kit": "^2.4.0",
     "dayjs": "^1.11.11",
     "next": "14.2.3",
+    "next-intl": "^3.14.1",
     "react": "^18",
     "react-dom": "^18"
   },
diff --git a/src/README.md b/src/README.md
@@ -0,0 +1,23 @@
+# Campground Guide to i18n
+<hr/>
+
+- Up for discussion but good practice is only adding the language to `./supportedLocales.json` when it has been completed.
+- Languages should be connected to a "region" for example:
+  - "en" > "en-US" (English - United States) or "en-GB"
+  - "fr" > "fr-FR" (French - France)
+  - "ru" > "ru-RU" (Russian - Russia)
+  - and so forth
+- If we decide to use Crowdin, the top 30 languages will be auto-populated in `../lang`
+- Once a language is ready to be supported on Campground, the PR must be merged, and added to the `supportedLocales.json`
+
+With this one json file, everything else is handled! :)
+
+TODO:
+
+- [] We need a locale switcher (should only load the locales in `supportedLocales.json`
+- [] When using default locale (en-US), the path should be `/`, not `/en-US`
+
+<hr/>
+
+# Tech Used:
+- [Next-Intl](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing)
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -13,6 +13,8 @@ import { ColorSchemeScript, MantineProvider, createTheme } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { ModalsProvider } from "@mantine/modals";
 import { Inter } from "next/font/google";
+import {getMessages} from "next-intl/server";
+import {NextIntlClientProvider} from "next-intl";
 
 export const metadata = {
   title: {
@@ -40,21 +42,27 @@ const theme = createTheme({
   },
 });
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
+  params: { locale }
 }: {
   children: React.ReactNode;
+  params: { locale: string }
 }) {
+  const messages = await getMessages();
+
   return (
-    <html lang="en" className={inter.className}>
+    <html lang={locale} className={inter.className}>
       <head>
         <ColorSchemeScript />
       </head>
       <body>
         <MantineProvider>
           <ModalsProvider>
             <Notifications />
-            {children}
+            <NextIntlClientProvider messages={messages}>
+              {children}
+            </NextIntlClientProvider>
           </ModalsProvider>
         </MantineProvider>
       </body>
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -0,0 +1,5 @@
+import { useTranslations } from "next-intl";
+export default function Home() {
+  const t = useTranslations("Home")
+  return <h1>{t("title")}</h1>
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -0,0 +1,11 @@
+import { notFound } from "next/navigation";
+import { getRequestConfig } from "next-intl/server";
+
+import locales from './supportedLocales.json';
+export default getRequestConfig(async ({locale}) => {
+  if (!locales.includes(locale as any)) notFound();
+
+  return {
+    messages: (await import(`../lang/${locale}.json`)).default
+  };
+})
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -0,0 +1,11 @@
+import createMiddleware from 'next-intl/middleware'
+import locales from './supportedLocales.json';
+
+export default createMiddleware({
+  locales: locales,
+  defaultLocale: "en-US"
+});
+
+export const config = {
+  matcher: ["/", `/(${locales.join("|")})/:path*`]
+}
diff --git a/src/supportedLocales.json b/src/supportedLocales.json
@@ -0,0 +1 @@
+[ "en-US", "ru-RU" ]
