Set up next-intl

UniBuc-DITC · Jan 15, 2024 · 7da65ce · 7da65ce
1 parent fbabca8
commit 7da65ce
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 4 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,6 @@
+const withNextIntl = require("next-intl/plugin")();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = nextConfig;
+module.exports = withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "next": "14.0.4",
+    "next-intl": "^3.4.2",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/src/app/globals.css → src/app/[locale]/globals.css b/src/app/globals.css → src/app/[locale]/globals.css
diff --git a/src/app/layout.tsx → src/app/[locale]/layout.tsx b/src/app/layout.tsx → src/app/[locale]/layout.tsx
@@ -11,11 +11,15 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
+  params: { locale },
 }: {
   children: React.ReactNode;
+  params: {
+    locale: string;
+  };
 }) {
   return (
-    <html lang="en">
+    <html lang={locale}>
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/src/app/page.tsx → src/app/[locale]/page.tsx b/src/app/page.tsx → src/app/[locale]/page.tsx
@@ -1,11 +1,15 @@
 import Image from "next/image";
 
+import { useTranslations } from "next-intl";
+
 export default function Home() {
+  const t = useTranslations("Index");
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
+          {t("getStarted")}&nbsp;
           <code className="font-mono font-bold">src/app/page.tsx</code>
         </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
@@ -15,7 +19,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{" "}
+            {t("by")}{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation";
+import { getRequestConfig } from "next-intl/server";
+
+export const locales = ["ro", "en"];
+
+export default getRequestConfig(async ({ locale }) => {
+  // Validate that the incoming `locale` parameter is valid
+  if (!locales.includes(locale as any)) {
+    notFound();
+  }
+
+  return {
+    messages: (await import(`./messages/${locale}.json`)).default,
+  };
+});
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -0,0 +1,6 @@
+{
+  "Index": {
+    "getStarted": "Get started by editing",
+    "by": "By"
+  }
+}
diff --git a/src/messages/ro.json b/src/messages/ro.json
@@ -0,0 +1,6 @@
+{
+  "Index": {
+    "getStarted": "Începe prin a edita fișierul",
+    "by": "De"
+  }
+}
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -0,0 +1,15 @@
+import createMiddleware from "next-intl/middleware";
+import { locales } from "./i18n";
+
+export default createMiddleware({
+  // A list of all locales that are supported
+  locales,
+
+  // Used when no locale matches
+  defaultLocale: "ro",
+});
+
+export const config = {
+  // Match only internationalized pathnames
+  matcher: ["/", "/(en|ro)/:path*"],
+};