rubel-sh / next-i18next-setup

This is a Next.js project bootstrapped with create-next-app.

next-i18next docs:

Steps

1: Create next-i18next.config.js

module.exports = {
    i18n: {
        defaultLocale: "en",
        locales: ["en", "bn", "ar", "hi"],
    },
};

2: Add exported i18 to next config

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");

const nextConfig = {
    reactStrictMode: true,
    i18n,
};

module.exports = nextConfig;

3: Wrap _app with appWithTranslation HOC

export default appWithTranslation(MyApp);

4: Create Locales in public -> locales -> en -> common.json

5: Using Translation to Components

import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
export default function Home() {
    const { t } = useTranslation("home");
    <h1>{t("our_universe")}</h1>;
}
// Eta na use korle locales json pabena
export const getStaticProps = async ({ locale }) => {
    return {
        props: {
            ...(await serverSideTranslations(locale, ["home"])),
        },
    };
};

6: Change Locale: it will change url with current locale

// Using Link to change locale
{
    locales.map((loc) => (
        <Link key={loc} href={"/"} locale={loc}>
            <button>{loc}</button>
        </Link>
    ));
}
// Using useRouter {push} to change locale
const handleClick = (e) => {
    push("/", undefined, { locale: "ar" });
};

<button onClick={handleClick}>PUSH ARABIC LANG</button>;