Next.js Language

_app.jsx

import '../styles/globals.css'
import { Provider as LanguageProvider } from 'context/language'

function MyApp({ Component, pageProps }) {
  return <>
    <LanguageProvider>
      <Component {...pageProps} />
    </LanguageProvider>
  </>
}

export default MyApp

en-GB.json

{
    "my_index": "anasayfa",
    "subkeys": {
        "value": "sub değer",
        "keyinsub": {
            "value": "my_value2",
            "keyinsub2": {
                "value": "my_value3",
                "keyinsub3": {
                    "value": "my_value4"
                }
            }
        }
    }
}

index.jsx

import { useTranslation } from 'context/language';

export default function Home() {
  const { translate, changeLanguage, languages, language } = useTranslation();

  return <>
    <p>Current: {language}</p>
    <p>Text: {translate('my_index')}</p>
    
    <p>Sub Keys: {translate('subkeys.keyinsub.value')} </p>
    <p>Sub Keys: {translate('subkeys.keyinsub.keyinsub2.value')} </p>
    <p>Sub Keys: {translate('subkeys.keyinsub.keyinsub2.keyinsub3.value')} </p>

    {languages.map((language, index) => <button key={index} onClick={() => changeLanguage(language.locale)}>{language.label}</button>)}

    <pre className="bg-black text-white mt-4 max-w-min p-4 rounded-lg m-4">
      <code>
        {JSON.stringify(language, null, 2)}:&nbsp;
      </code>
      <code>
        {JSON.stringify(languages, null, 2)}
      </code>
    </pre>

  </>
}

languageContext.js

import { createContext, useContext, useEffect, useState } from "react";
import { useRouter } from "next/router";
import localesConfig from "../../locales.config.js";

export const LanguageContext = createContext();
export const useTranslation = () => useContext(LanguageContext);

export const LanguageProvider = ({ children }) => {
    const { locale, push, asPath } = useRouter();
    const [translationFile, setTranslationFile] = useState();
    const [language, setLanguage] = useState(localesConfig.find(el => el.default).value)
    const [languages, setLanguages] = useState(localesConfig);

    useEffect(() => {
        const store = localStorage.getItem("language");
        if (locale) {
            if (localesConfig.find(el => el.value === locale)) {
                if (locale !== store) {
                    const storedLanguage = languages.find(el => el.value === store);
                    if (storedLanguage) {
                        updateLanguage(storedLanguage.value, storedLanguage.locale);
                    } else {
                        changeLanguage(languages.find(el => el.default).locale);
                    }
                }
            }
        }
    }, [ language ]);

    const changeLanguage = (language) => {
        const languageFile = languages.find((lng) => lng.locale === language);
        try {
            updateLanguage(languageFile.value, languageFile.locale);
        } catch (error) {
            alert('Language not found');
        }
    };

    const translate = (text) => {
        if (translationFile) {
            if (text.includes('.')) {
                const splittedText = text.split('.');

                if (splittedText.length === 2) {
                    return translationFile[splittedText[0]][splittedText[1]];
                } else if (splittedText.length > 2) {
                    let result = translationFile[splittedText[0]];
                    splittedText.forEach((text, index) => {
                        if (index > 0) {
                            result = result[text];
                        }
                    });
                    
                    return result;
                }
            } else {
                return translationFile[text];
            }
        }
        return text;
    }

    const updateLanguage = (value, locale) => {
        setLanguage(value);
        setTranslationFile(require(`locales/${locale}.json`));
        localStorage.setItem("language", value);
        push(asPath, asPath, { locale: value });
    }

    return (
        <LanguageContext.Provider value={{ languages, translate, changeLanguage, language }}>
            {children}
        </LanguageContext.Provider>
    );
}

locales.config.js

module.exports = [
  { default: true, label: 'English', value: 'en-gb', iso: 'gb', locale: 'en-GB' }
]

next.config.js

const localesConfig = require('./locales.config')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: false,
  i18n: {
    locales: localesConfig.map((locale) => locale.value),
    defaultLocale: localesConfig.find(el => el.default).value,
  }
}

module.exports = nextConfig

Good