sensitive-blue•14mo ago

i18n provider using NextJs App Router

The new App Router in NextJs changes lot's of things. Here is a blog post about implementing i18n in NextJs App Router with i18next-resources-to-backend https://locize.com/blog/next-13-app-dir-i18n/ I'm trying to implement it in my refine i18n Provider

locize - localization as a service

i18n with Next.js 13 and app directory (an i18next guide)

Looking for a way to internationalize your Next.js 13 project with the new app directory feature? Then this guide is for you!

3 Replies

kapa.ai•14mo ago

Hi @adamquadmon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some information on how to implement i18n in a refine project using the i18n Provider. First, create an i18n instance using react-i18next:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-xhr-backend";
import detector from "i18next-browser-languagedetector";

i18n.use(Backend)
 .use(detector)
 .use(initReactI18next)
 .init({
 supportedLngs: ["en", "de"],
 backend: {
 loadPath: "/locales/{{lng}}/{{ns}}.json",
 },
 defaultNS: "common",
 fallbackLng: ["en", "de"],
 });

export default i18n;

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-xhr-backend";
import detector from "i18next-browser-languagedetector";

i18n.use(Backend)
 .use(detector)
 .use(initReactI18next)
 .init({
 supportedLngs: ["en", "de"],
 backend: {
 loadPath: "/locales/{{lng}}/{{ns}}.json",
 },
 defaultNS: "common",
 fallbackLng: ["en", "de"],
 });

export default i18n;

Then, import the i18n instance in your index.tsx file and wrap the App in React.Suspense:

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import "./i18n";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
 <React.StrictMode>
 <React.Suspense fallback="loading">
 <App />
 </React.Suspense>
 </React.StrictMode>,
);

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import "./i18n";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
 <React.StrictMode>
 <React.Suspense fallback="loading">
 <App />
 </React.Suspense>
 </React.StrictMode>,
);

Finally, define your i18n provider and pass it to the Refine component:

return (
 <Refine
 routerProvider={routerProvider}
 notificationProvider={notificationProvider}
 Layout={Layout}
 i18nProvider={i18nProvider}
 dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
 Header={Header}
 resources={[
 {
 name: "posts",
 list: PostList,
 create: PostCreate,
 edit: PostEdit,
 show: PostShow,
 },
 ]}
 />
);

return (
 <Refine
 routerProvider={routerProvider}
 notificationProvider={notificationProvider}
 Layout={Layout}
 i18nProvider={i18nProvider}
 dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
 Header={Header}
 resources={[
 {
 name: "posts",
 list: PostList,
 create: PostCreate,
 edit: PostEdit,
 show: PostShow,
 },
 ]}
 />
);

For more information on refine's i18n Provider, you can refer to the documentation (https://refine.dev/docs/api-reference/core/providers/i18n-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@461260744936259584> kapa.ai is still learning and improving, please let us how it did by reacting below

ugly-tan•14mo ago

Great, we would be very grateful if you could update and contribute to our example ‘with-nextjs-appdir’