next-i18next

package.json

@@ -3,17 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "nodemon server.js",
+    "dev": "next dev",
     "build": "next build",
-    "start": "NODE_ENV=production node server.js"
+    "start": "next start"
   },
   "dependencies": {
     "express": "^4.17.1",
-    "i18next": "^19.4.5",
     "next": "^9.5.0",
-    "nodemon": "^2.0.4",
     "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-i18next": "^11.5.0"
+    "react-dom": "16.13.1"
   }
 }

public/static/locales/en.json → public/static/locales/en/common.json

@@ -1,3 +1,4 @@
 {
+  "home": "Home",
   "helloWorld": "Hello World"
 }

public/static/locales/es.json → public/static/locales/es/common.json

@@ -1,3 +1,4 @@
 {
+  "home": "Inicio",
   "helloWorld": "Hola mundo"
 }

src/components/Header.js

@@ -1,15 +1,13 @@
 import Link from "next/link";
+import { useTranslation } from "../i18n";
 import styles from "./Header.module.css";
 
 function Header() {
+  const { t } = useTranslation();
   return (
     <header className={styles.header}>
       <Link href="/">
-        <a>Home</a>
-      </Link>
-      {" | "}
-      <Link href="/gip">
-        <a>getInitialProps</a>
+        <a>{t('home')}</a>
       </Link>
     </header>
   );

src/i18n.js

@@ -1,21 +1,40 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
+const NextI18Next = require('next-i18next').default
+const path = require('path')
 
-export const supportedLocales = ["en", "de", "es"];
+const DEFAULT_LOCALE = 'en';
+const supportedLangs = ['en', 'es'];
+const domainLocaleMap = {
+  localhost: "en",
+  "nexttest.com": "en",
+  "nexttest.es": "es",
+  "nexttest.de": "de",
+  "it.nexttest.international": "it",
+  "ua.nexttest.international": "ua",
+};
 
-export default function initI18N(lang) {
-  console.log("initI18N: lang:", lang);
-  i18n.use(initReactI18next);
-  i18n.init({
-    fallbackLng: "en",
-    lng: lang || "en",
-    resources: {
-      en: {
-        translation: {
-          helloWorld: "Hello world",
-        },
-      },
-    },
-  });
-  return i18n;
+const domainDetector = {
+  name: 'domain',
+  lookup(req, res, options) {
+    let locale = DEFAULT_LOCALE;
+    if (typeof window !== 'undefined' ) {
+      locale = domainLocaleMap[window.location.hostname];
+    } else {
+      const hostname = req.headers.host?.split(':')[0];
+      locale = domainLocaleMap[hostname];
+    }
+    return locale;
+  },
+  cacheUserLanguage(req, res, locale, options = {}) {
+    //todo
+  },
 }
+
+module.exports = new NextI18Next({
+  defaultLanguage: DEFAULT_LOCALE,
+  otherLanguages: supportedLangs,
+  localePath: path.resolve('./public/static/locales'),
+  customDetectors: [domainDetector],
+  detection: {
+    order: ['domain']
+  }
+});

src/pages/_app.js

@@ -1,20 +1,18 @@
-import { I18nextProvider } from "react-i18next";
-import i18n from "../i18n";
+import { appWithTranslation } from "../i18n";
 import { useRouter } from "next/router";
 import Layout from "../components/Layout";
 import "../styles.css";
+import App from 'next/app'
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
-  const { locale } = router.query;
-  console.log("App locale:", locale);
   return (
-    <I18nextProvider i18n={i18n(locale)}>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </I18nextProvider>
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
   );
 }
 
-export default MyApp;
+MyApp.getInitialProps = async (appContext) => ({ ...await App.getInitialProps(appContext) });
+
+export default appWithTranslation(MyApp);

src/pages/index.js

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../i18n";
 import { useRouter } from "next/router";
 
 export default function Home() {
@@ -8,5 +8,7 @@ export default function Home() {
 }
 
 Home.getInitialProps = async () => {
-  return {};
+  return {
+    namespacesRequired: ['common']
+  };
 };