feat(i18n-next): use next-intl package instead of i18next

examples/i18n-nextjs/next.config.mjs

@@ -1,6 +1,10 @@
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@refinedev/antd"],
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

examples/i18n-nextjs/package.json

@@ -20,18 +20,11 @@
     "@refinedev/simple-rest": "^5.0.8",
     "antd": "^5.17.0",
     "cross-env": "^7.0.3",
-    "i18next": "^20.1.0",
-    "i18next-browser-languagedetector": "^6.1.1",
-    "i18next-resources-to-backend": "^1.2.0",
-    "i18next-xhr-backend": "^3.2.2",
-    "js-cookie": "^3.0.1",
     "next": "^14.1.0",
     "next-compose-plugins": "^2.2.1",
-    "next-i18next": "^8.9.0",
-    "nookies": "^2.5.2",
+    "next-intl": "^3.25.3",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-i18next": "^11.8.11"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",

examples/i18n-nextjs/public/locales/de/common.json

@@ -1,4 +1,5 @@
 {
+  "ID": "ID",
   "pages": {
     "login": {
       "title": "Melden Sie sich bei Ihrem Konto an",
@@ -130,6 +131,28 @@
       "show": "Eintrag zeigen"
     }
   },
+  "posts": {
+    "posts": "Einträge",
+    "fields": {
+      "id": "Id",
+      "title": "Titel",
+      "category": "Kategorie",
+      "status": {
+        "title": "Status",
+        "published": "Veröffentlicht",
+        "draft": "Draft",
+        "rejected": "Abgelehnt"
+      },
+      "content": "Inhalh",
+      "createdAt": "Erstellt am"
+    },
+    "titles": {
+      "create": "Erstellen",
+      "edit": "Bearbeiten",
+      "list": "Einträge",
+      "show": "Eintrag zeigen"
+    }
+  },
   "categories": {
     "categories": "Kategorien",
     "fields": {

examples/i18n-nextjs/public/locales/en/common.json

@@ -1,4 +1,5 @@
 {
+  "ID": "ID",
   "pages": {
     "login": {
       "title": "Sign in to your account",
@@ -130,6 +131,42 @@
       "show": "Show Post"
     }
   },
+  "posts": {
+    "posts": "Blog Posts",
+    "fields": {
+      "id": "Id",
+      "title": "Title",
+      "category": "Category",
+      "status": {
+        "title": "Status",
+        "published": "Published",
+        "draft": "Draft",
+        "rejected": "Rejected"
+      },
+      "content": "Content",
+      "createdAt": "Created At"
+    },
+    "titles": {
+      "create": "Create Post",
+      "edit": "Edit Post",
+      "list": "Posts",
+      "show": "Show Post"
+    }
+  },
+  "categories": {
+    "categories": "Categories",
+    "fields": {
+      "id": "Id",
+      "title": "Title",
+      "createdAt": "Created At"
+    },
+    "titles": {
+      "create": "Create Category",
+      "edit": "Edit Category",
+      "list": "Categories",
+      "show": "Show Category"
+    }
+  },
   "table": {
     "actions": "Actions"
   }

examples/i18n-nextjs/src/app/_refine_context.tsx

@@ -5,13 +5,11 @@ import { useNotificationProvider } from "@refinedev/antd";
 import { GitHubBanner, Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
 import routerProvider from "@refinedev/nextjs-router";
-import React, { type PropsWithChildren } from "react";
+import React, { Suspense, type PropsWithChildren } from "react";
 import { ColorModeContextProvider } from "@contexts/color-mode";
 import { dataProvider } from "@providers/data-provider";
-import { useTranslation } from "next-i18next";
-
-// initialize i18n
-import "../providers/i18n";
+import { useLocale, useTranslations } from "next-intl";
+import { setUserLocale } from "@i18n";
 
 type Props = {
   themeMode?: string;
@@ -21,15 +19,17 @@ export const RefineContext = ({
   themeMode,
   children,
 }: PropsWithChildren<Props>) => {
-  const { t, i18n } = useTranslation();
+  const t = useTranslations();
+  const locale = useLocale();
+
   const i18nProvider = {
-    translate: (key: string, params: object) => t(key, params),
-    changeLocale: (lang: string) => i18n.changeLanguage(lang),
-    getLocale: () => i18n.language,
+    translate: (key: string) => t(key),
+    getLocale: () => locale,
+    changeLocale: setUserLocale,
   };
 
   return (
-    <>
+    <Suspense fallback={<div>Loading...</div>}>
       <GitHubBanner />
       <RefineKbarProvider>
         <ColorModeContextProvider defaultMode={themeMode}>
@@ -73,6 +73,6 @@ export const RefineContext = ({
           </DevtoolsProvider>
         </ColorModeContextProvider>
       </RefineKbarProvider>
-    </>
+    </Suspense>
   );
 };

examples/i18n-nextjs/src/app/layout.tsx

@@ -2,7 +2,10 @@ import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import React, { Suspense } from "react";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
+import { NextIntlClientProvider, useTranslations } from "next-intl";
+import { getLocale, getMessages } from "next-intl/server";
 import { RefineContext } from "./_refine_context";
+
 import "@refinedev/antd/dist/reset.css";
 
 export const metadata: Metadata = {
@@ -13,21 +16,25 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const cookieStore = cookies();
   const theme = cookieStore.get("theme");
-  const lang = cookieStore.get("NEXT_LOCALE");
+
+  const locale = await getLocale();
+  const messages = await getMessages();
 
   return (
-    <html lang={lang?.value || "en"}>
+    <html lang={locale}>
       <body>
         <Suspense>
           <AntdRegistry>
-            <RefineContext themeMode={theme?.value}>{children}</RefineContext>
+            <NextIntlClientProvider locale={locale} messages={messages}>
+              <RefineContext themeMode={theme?.value}>{children}</RefineContext>
+            </NextIntlClientProvider>
           </AntdRegistry>
         </Suspense>
       </body>

examples/i18n-nextjs/src/i18n/config.ts

@@ -0,0 +1,2 @@
+export const I18N_COOKIE_NAME = "NEXT_LOCALE";
+export const DEFAULT_LOCALE = "en";

examples/i18n-nextjs/src/i18n/index.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { DEFAULT_LOCALE } from "./config";
+import { I18N_COOKIE_NAME } from "./config";
+
+export async function getUserLocale() {
+  return cookies().get(I18N_COOKIE_NAME)?.value || DEFAULT_LOCALE;
+}
+
+export async function setUserLocale(locale: string) {
+  cookies().set(I18N_COOKIE_NAME, locale);
+}

examples/i18n-nextjs/src/i18n/request.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { getUserLocale } from "@i18n";
+import { getRequestConfig } from "next-intl/server";
+
+export default getRequestConfig(async () => {
+  const locale = await getUserLocale();
+
+  return {
+    locale,
+    messages: (await import(`../../public/locales/${locale}/common.json`))
+      .default,
+  };
+});