extend next example

example/next/next-i18next.config.js

@@ -2,16 +2,22 @@ const HttpBackend = require('i18next-http-backend/cjs')
 const ChainedBackend= require('i18next-chained-backend').default
 const LocalStorageBackend = require('i18next-localstorage-backend').default
 
+const isBrowser = typeof window !== 'undefined'
+
 module.exports = {
+  debug: process.env.NODE_ENV === 'development',
   backend: {
     backendOptions: [{ expirationTime: 60 * 60 * 1000 }, {}], // 1 hour
-    backends: typeof window !== 'undefined' ? [LocalStorageBackend, HttpBackend]: [],
+    backends: isBrowser ? [LocalStorageBackend, HttpBackend]: [],
   },
-  debug: process.env.NODE_ENV === 'development',
+  // react: { // used only for the lazy reload
+  //   bindI18n: 'languageChanged loaded',
+  //   useSuspense: false
+  // },
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de'],
   },
   serializeConfig: false,
-  use: typeof window !== 'undefined' ? [ChainedBackend] : [],
+  use: isBrowser ? [ChainedBackend] : [],
 }

example/next/pages/client-page.js

@@ -9,6 +9,7 @@ import { Footer } from '../components/Footer'
 const ClientPage = () => {
   const { t, ready } = useTranslation(['client-page', 'footer'])
   if (!ready) return 'loading translations...'
+  // but because of this ready return, you may see a warning like this: "Expected server HTML to contain a matching text node for..."
 
   return (
     <>

example/next/pages/index.js

@@ -51,6 +51,13 @@ const Homepage = () => {
               {t('to-client-page')}
             </button>
           </Link>
+          <Link href='/lazy-reload-page'>
+            <button
+              type='button'
+            >
+              {t('to-lazy-reload-page')}
+            </button>
+          </Link>
           <button
             type='button'
             onClick={updateShallowRoute}

example/next/pages/lazy-reload-page.js

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import { Header } from '../components/Header'
+import { Footer } from '../components/Footer'
+import { useEffect } from 'react'
+
+const LazyReloadPage = () => {
+
+  const { t, i18n } = useTranslation(['lazy-reload-page', 'footer'], { bindI18n: 'languageChanged loaded' })
+  // bindI18n: loaded is needed because of the reloadResources call
+  // if all pages use the reloadResources mechanism, the bindI18n option can also be defined in next-i18next.config.js
+  useEffect(() => {
+    i18n.reloadResources(i18n.resolvedLanguage, ['lazy-reload-page', 'footer'])
+  }, [])
+
+  return (
+    <>
+      <main>
+        <Header heading={t('h1')} title={t('title')} />
+        <Link href='/'>
+          <button
+            type='button'
+          >
+            {t('back-to-home')}
+          </button>
+        </Link>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...await serverSideTranslations(locale, ['lazy-reload-page', 'footer']),
+  },
+})
+
+export default LazyReloadPage

example/next/public/locales/de/common.json

@@ -3,6 +3,7 @@
   "change-locale": "Wechseln Locale",
   "to-second-page": "Zur zweiten Seite",
   "to-client-page": "Zur Client Seite",
+  "to-lazy-reload-page": "Zur Lazy-Reload Seite",
   "error-with-status": "Auf dem Server ist ein Fehler ({{statusCode}}) aufgetreten",
   "error-without-status": "Auf dem Server ist ein Fehler aufgetreten",
   "title": "Hauptseite | next-i18next",

example/next/public/locales/de/lazy-reload-page.json

@@ -0,0 +1,5 @@
+{
+  "h1": "Eine Seite, die Übersetzungsressourcen über http aktualisiert nachlädt",
+  "back-to-home": "Zurück zur Hauptseite",
+  "title": "Lazy Reload-Seite | next-i18next"
+}

example/next/public/locales/en/common.json

@@ -3,6 +3,7 @@
   "change-locale": "Change locale",
   "to-second-page": "To second page",
   "to-client-page": "To client page",
+  "to-lazy-reload-page": "To lazy reload page",
   "error-with-status": "A {{statusCode}} error occurred on server",
   "error-without-status": "An error occurred on the server",
   "title": "Home | next-i18next",

example/next/public/locales/en/lazy-reload-page.json

@@ -0,0 +1,5 @@
+{
+  "h1": "A page that lazy realoads translation resources via http",
+  "back-to-home": "Back to home",
+  "title": "Lazy reload page | next-i18next"
+}