diff --git a/next-i18next.config.js b/next-i18next.config.js
index 94c2ab4..d25cd62 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -1,15 +1,25 @@
+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',
/**
@@ -17,6 +27,10 @@ module.exports = {
*/
// 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] : [],
};
diff --git a/package-lock.json b/package-lock.json
index 16f48ce..4ffcf54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,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",
@@ -17116,6 +17119,14 @@
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"dev": true
},
+ "node_modules/cross-fetch": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+ "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+ "dependencies": {
+ "node-fetch": "2.6.7"
+ }
+ },
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -21768,11 +21779,35 @@
"@babel/runtime": "^7.20.6"
}
},
+ "node_modules/i18next-chained-backend": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/i18next-chained-backend/-/i18next-chained-backend-4.2.0.tgz",
+ "integrity": "sha512-p3qhv6GMouhpcFPnOBqSDsQyVrwZu+PKr+kXaEAGE+w9O39t4pbpBsFYjxh4Nvhn8MUEXstaDx4ZuQvsNlI5fg==",
+ "dependencies": {
+ "@babel/runtime": "^7.19.4"
+ }
+ },
"node_modules/i18next-fs-backend": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.0.tgz",
"integrity": "sha512-gur0HAEkVDeUgZ9WNUcACYYl2N5FUt0C6bQCWsFPc+IYMXYWfiFQa8QQ930QAVYf71I75Ptl4XqQo5sl/u6/mA=="
},
+ "node_modules/i18next-http-backend": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.1.0.tgz",
+ "integrity": "sha512-rTVhhFrpnZJnNvCCdC6RjhFPk0S6mJ2VAix93vbDD19ixlrSJtoNqkk49wvR10PImBSsuGJf35gMQwn2mjer6A==",
+ "dependencies": {
+ "cross-fetch": "3.1.5"
+ }
+ },
+ "node_modules/i18next-localstorage-backend": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/i18next-localstorage-backend/-/i18next-localstorage-backend-4.1.0.tgz",
+ "integrity": "sha512-lxcuww2QSIvu3Ev5fiysTrAjNzWwhVh2u+/ZJCkxIg9Eo9KL5A8qQwmujlsdADs4YjfjxPm/GaivIYxcqWqKgg==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.6"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -28765,7 +28800,6 @@
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
- "dev": true,
"dependencies": {
"whatwg-url": "^5.0.0"
},
@@ -28784,20 +28818,17 @@
"node_modules/node-fetch/node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
- "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
- "dev": true
+ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
"node_modules/node-fetch/node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
- "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
- "dev": true
+ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/node-fetch/node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
- "dev": true,
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
@@ -49653,6 +49684,14 @@
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"dev": true
},
+ "cross-fetch": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+ "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+ "requires": {
+ "node-fetch": "2.6.7"
+ }
+ },
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -53229,11 +53268,35 @@
"@babel/runtime": "^7.20.6"
}
},
+ "i18next-chained-backend": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/i18next-chained-backend/-/i18next-chained-backend-4.2.0.tgz",
+ "integrity": "sha512-p3qhv6GMouhpcFPnOBqSDsQyVrwZu+PKr+kXaEAGE+w9O39t4pbpBsFYjxh4Nvhn8MUEXstaDx4ZuQvsNlI5fg==",
+ "requires": {
+ "@babel/runtime": "^7.19.4"
+ }
+ },
"i18next-fs-backend": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.1.0.tgz",
"integrity": "sha512-gur0HAEkVDeUgZ9WNUcACYYl2N5FUt0C6bQCWsFPc+IYMXYWfiFQa8QQ930QAVYf71I75Ptl4XqQo5sl/u6/mA=="
},
+ "i18next-http-backend": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.1.0.tgz",
+ "integrity": "sha512-rTVhhFrpnZJnNvCCdC6RjhFPk0S6mJ2VAix93vbDD19ixlrSJtoNqkk49wvR10PImBSsuGJf35gMQwn2mjer6A==",
+ "requires": {
+ "cross-fetch": "3.1.5"
+ }
+ },
+ "i18next-localstorage-backend": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/i18next-localstorage-backend/-/i18next-localstorage-backend-4.1.0.tgz",
+ "integrity": "sha512-lxcuww2QSIvu3Ev5fiysTrAjNzWwhVh2u+/ZJCkxIg9Eo9KL5A8qQwmujlsdADs4YjfjxPm/GaivIYxcqWqKgg==",
+ "requires": {
+ "@babel/runtime": "^7.20.6"
+ }
+ },
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -58451,7 +58514,6 @@
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
- "dev": true,
"requires": {
"whatwg-url": "^5.0.0"
},
@@ -58459,20 +58521,17 @@
"tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
- "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
- "dev": true
+ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
"webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
- "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
- "dev": true
+ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
- "dev": true,
"requires": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
diff --git a/package.json b/package.json
index 15ae6b0..e7150a1 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/csr-translation.tsx b/src/pages/csr-translation.tsx
new file mode 100644
index 0000000..155c655
--- /dev/null
+++ b/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 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 {t('main-navigation:nav.home')}
;
+};
+
+export default CSRTranslationPage;