Experimenting with csr translations

next-i18next.config.js

@@ -1,22 +1,36 @@
+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';
+
 /**
  * @type {import('next-i18next').UserConfig}
  */
 module.exports = {
 	// https://www.i18next.com/overview/configuration-options#logging
 	// debug: process.env.NODE_ENV === 'development',
+	backend: {
+		backendOptions: [{ expirationTime: 60 * 60 * 1000 }, {}], // 1 hour
+		backends: isBrowser ? [LocalStorageBackend, HttpBackend] : [],
+	},
 	i18n: {
 		defaultLocale: 'en-US',
 		locales: ['en-US', 'de-DE'],
 	},
 	/** To avoid issues when deploying to some paas (vercel...) */
-	localePath: typeof window === 'undefined' ? require('path').resolve('./public/locales') : '/locales',
+	localePath: !isBrowser ? require('path').resolve('./public/locales') : '/locales',
 	reloadOnPrerender: process.env.NODE_ENV === 'development',
 
 	/**
 	 * @link https://github.com/i18next/next-i18next#6-advanced-configuration
 	 */
 	// saveMissing: false,
 	// strictMode: true,
-	// serializeConfig: false,
-	// react: { useSuspense: false }
+	serializeConfig: false,
+	// react: { // used only for the lazy reload
+	//   bindI18n: 'languageChanged loaded',
+	//   useSuspense: false
+	// },
+	use: isBrowser ? [ChainedBackend] : [],
 };

package.json

@@ -43,6 +43,9 @@
 		"framer-motion": "~7.10.0",
 		"http-proxy-middleware": "~2.0.6",
 		"i18next": "~22.4.5",
+		"i18next-chained-backend": "~4.2.0",
+		"i18next-http-backend": "~2.1.0",
+		"i18next-localstorage-backend": "~4.1.0",
 		"mobx": "~6.7.0",
 		"next": "~13.0.7",
 		"next-i18next": "~13.0.2",

src/pages/csr-translation.tsx

@@ -0,0 +1,13 @@
+import { NextPage } from 'next';
+import { useTranslation } from 'react-i18next';
+
+const CSRTranslationPage: NextPage = () => {
+	const { t, ready } = useTranslation(['main-navigation']);
+
+	if (!ready) return <div>loading translations...</div>;
+	// but because of this ready return, you may see a warning like this: "Expected server HTML to contain a matching text node for..."
+
+	return <div>{t('main-navigation:nav.home')}</div>;
+};
+
+export default CSRTranslationPage;