next-i18next-static-site

i18next solution for static sites build with Next.js (static HTML export / next export).

This package brings you react-i18next and i18next to your static sites build with the next export future from Next.js.

• 🗲 Translation is already rendered (SSG), client will receive the final translated site.
• 🔥 Hot reloading works also when you update your locale (translation) files.
• 🚀 Automatic browser language detection can be realized.
• 🍪 Cookie stores the client language.

Installation

npm install --save next-i18next-static-site

Usage

publicRuntimeConfig is deprecated by Next.js.
I moved the configuration for next-i18next-static-site to environment variables.

Set the supported languages and the namespaces in your next.config.js or in your .env.local:

next.config.js example:

module.exports = {
  env: {
    NEXT_PUBLIC_I18N_LANGUAGES: '["en", "de"]',
    NEXT_PUBLIC_I18N_DEFAULT_LANGUAGE: "en",
    NEXT_PUBLIC_I18N_NAMESPACES: '["common", "meta", "error"]',
    NEXT_PUBLIC_I18N_DEFAULT_NAMESPACE: "common",
  },
};

Arrays have to be a string within next.config.js, just put them into brackets, otherwise Next.js will throw an error.

.env.local example:

NEXT_PUBLIC_I18N_LANGUAGES=["en", "de"]
NEXT_PUBLIC_I18N_DEFAULT_LANGUAGE=en
NEXT_PUBLIC_I18N_NAMESPACES=["common", "meta", "error"]
NEXT_PUBLIC_I18N_DEFAULT_NAMESPACE=common

Add your locales like that:

📦project
 ┗ 📂locales
    ┣ 📂de
    ┃  ┗ 📜common.json
    ┗ 📂en
       ┗ 📜common.json

The locales folder structure could be changed, just update the locales loader to match your custom structure

Load the locales:

// lib/locales.js
import { languages, namespaces } from "next-i18next-static-site";

const locales = {};
languages.map((language) => {
  locales[language] = {};

  namespaces.map((namespace) => {
    locales[language][namespace] = require("./../locales/" +
      language +
      "/" +
      namespace +
      ".json");
  });
});

export default locales;

Finally implement the locales loader and the I18nProvider like this in your _app.js:

import {
  I18nProvider,
  languages,
  defaultLanguage,
  namespaces,
  defaultNamespace,
} from "next-i18next-static-site";

// Locales loader
import locales from "../lib/locales";

const App = function ({ Component, pageProps }) {
  // i18n options
  const i18n = {
    languages,
    defaultLanguage,
    namespaces,
    defaultNamespace,
    locales,
  };

  return (
    <I18nProvider i18n={i18n}>
      <Component {...pageProps} />
    </I18nProvider>
  );
};

export default App;

Now you are able to use useTranslation, withTranslation, Translation and Trans directly from react-i18next or from next-i18next-static-site.

The example Next.js site provides a Link and LinkText (used for Trans) component and als a custom 404 page.

Language detection

Your pages/index.js can use the default languageDetection() function to redirect the user based on the browser locale or stored cookie:

import { languageDetection } from "next-i18next-static-site";

export default function Home() {
  languageDetection();
}

Custom language detection needed?
Have a look at the languageDetection() function.

Online Example at Cloudflare Pages:

https://next-i18next-static-site.pages.dev/de
Source: examples/web