optimistic-gold
optimistic-gold12mo 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
kapa.ai12mo 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
kapa.ai12mo ago
<@461260744936259584> kapa.ai is still learning and improving, please let us how it did by reacting below
yappiest-sapphire
yappiest-sapphire12mo ago
Great, we would be very grateful if you could update and contribute to our example ‘with-nextjs-appdir’