update deps for next example

i18next · Nov 1, 2023 · 413f433 · 413f433
1 parent 75b8d22
commit 413f433
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/example/next/README.md b/example/next/README.md
@@ -79,6 +79,23 @@ export default appWithTranslation(MyApp, nextI18nConfig);
 
 Use the `ready` property from `useTranslation` to ensure the i18next instance is ready and that your translations are loaded to avoid the user seeing bare translation keys, below is a very simplistic example of this.
 
+Also make sure you set the `partialBundledLanguages` option to true, like [here](https://github.com/i18next/i18next-http-backend/blob/master/example/next/next-i18next.config.js#L14).
+
+```js
+// ...
+const isBrowser = typeof window !== 'undefined'
+
+module.exports = {
+  backend: { /* ... */ },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'de'],
+  },
+  partialBundledLanguages: isBrowser && true,
+  // ...
+}
+```
+
 ADVICE: I suggest you don't use this client-side only approach, but use the lazy-reload approach (below) instead!
 
 ```jsx

diff --git a/example/next/next-i18next.config.js b/example/next/next-i18next.config.js
@@ -9,8 +9,9 @@ module.exports = {
   debug: isDev,
   backend: {
     backendOptions: [{ expirationTime: isDev ? 0 : 60 * 60 * 1000 }, {}], // 1 hour
-    backends: isBrowser ? [LocalStorageBackend, HttpBackend]: [],
+    backends: isBrowser ? [LocalStorageBackend, HttpBackend] : [],
   },
+  partialBundledLanguages: isBrowser && true,
   // react: { // used only for the lazy reload
   //   bindI18n: 'languageChanged loaded',
   //   useSuspense: false

diff --git a/example/next/package.json b/example/next/package.json
@@ -15,7 +15,7 @@
     "i18next-http-backend": "2.3.1",
     "i18next-localstorage-backend": "4.2.0",
     "next": "14.0.1",
-    "next-i18next": "14.0.3"
+    "next-i18next": "15.0.0"
   },
   "devDependencies": {
     "prop-types": "15.8.1"

diff --git a/example/next/pages/client-page.js b/example/next/pages/client-page.js
@@ -7,7 +7,7 @@ import { Header } from '../components/Header'
 import { Footer } from '../components/Footer'
 
 const ClientPage = () => {
-  const { t, ready } = useTranslation(['client-page', 'footer'])
+  const { t, ready, i18n } = 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..."