next-i18next 8.10.0 → 9.2.0

package/README.md

@@ -260,6 +260,8 @@ To migrate from previous versions to the version 8, check out the [v8-migration
 
 ## Notes
 
+### Docker
+
 For Docker deployment, note that if you use the `Dockerfile` from [Next.js docs](https://nextjs.org/docs/deployment#docker-image) do not forget to copy `next.config.js` and `next-i18next.config.js` into the Docker image.
 
 ```
@@ -267,6 +269,20 @@ COPY --from=builder /app/next.config.js ./next.config.js
 COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js
 ```
 
+### Asynchronous i18next backends
+
+If you choose to use an i18next backend different to the built-in [i18next-fs-backend](https://github.com/i18next/i18next-fs-backend), you will need to ensure the translation resources are loaded before you call the `t` function.
+Since [React suspense is not yet supported for SSR](https://github.com/isaachinman/next-i18next/issues/1255), this can be solved in 2 different ways:
+
+**1) Preload the namespaces:**
+
+Set the `ns` option, like in [this example](https://github.com/locize/next-i18next-locize/blob/main/next-i18next.config.js#L17). Doing this will ensure all translation resources are loaded on initialization.
+
+**2) Check the ready flag:**
+
+If you cannot or do not want to provide the `ns` array, calls to the `t` function will cause namespaces to be loaded on the fly. This means you'll need to handle the "not ready" state by checking `ready === true` or `props.tReady === true`. Not doing so will result in rendering your translations before they loaded, which will cause "save missing" be called despite the translations actually existing (just yet not loaded).
+This can be done with the [useTranslation hook](https://react.i18next.com/latest/usetranslation-hook#not-using-suspense) or the [withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense).
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

package/dist/commonjs/appWithTranslation.js

@@ -86,17 +86,20 @@ var appWithTranslation = function appWithTranslation(WrappedComponent) {
   var configOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
   var AppWithTranslation = function AppWithTranslation(props) {
-    var _nextI18Next = props.pageProps._nextI18Next;
-    var locale = props.router.locale; // Memoize the instance and only re-initialize when either:
+    var _ref = props.pageProps,
+        _nextI18Next = _ref._nextI18Next;
+    var locale = null; // Memoize the instance and only re-initialize when either:
     // 1. The route changes (non-shallowly)
     // 2. Router locale changes
 
     var i18n = (0, _react.useMemo)(function () {
       var _userConfig;
 
-      if (!locale || !_nextI18Next) return null;
+      if (!_nextI18Next) return null;
       var userConfig = _nextI18Next.userConfig;
-      var initialI18nStore = _nextI18Next.initialI18nStore;
+      var initialI18nStore = _nextI18Next.initialI18nStore,
+          initialLocale = _nextI18Next.initialLocale;
+      locale = initialLocale;
 
       if (userConfig === null && configOverride === null) {
         throw new Error('appWithTranslation was called without a next-i18next config');

package/dist/commonjs/config/defaultConfig.js

@@ -36,7 +36,7 @@ var defaultConfig = {
   localePath: LOCALE_PATH,
   localeStructure: LOCALE_STRUCTURE,
   react: {
-    useSuspense: true
+    useSuspense: false
   },
   reloadOnPrerender: false,
   serializeConfig: true,

package/dist/commonjs/serverSideTranslations.js

@@ -243,6 +243,7 @@ var serverSideTranslations = /*#__PURE__*/function () {
             return _context.abrupt("return", {
               _nextI18Next: {
                 initialI18nStore: initialI18nStore,
+                initialLocale: initialLocale,
                 userConfig: config.serializeConfig ? userConfig : null
               }
             });

package/dist/es/appWithTranslation.js

@@ -12,22 +12,22 @@ export const appWithTranslation = (WrappedComponent, configOverride = null) => {
     const {
       _nextI18Next
     } = props.pageProps;
-    const {
-      locale
-    } = props.router; // Memoize the instance and only re-initialize when either:
+    let locale = null; // Memoize the instance and only re-initialize when either:
     // 1. The route changes (non-shallowly)
     // 2. Router locale changes
 
     const i18n = useMemo(() => {
       var _userConfig;
 
-      if (!locale || !_nextI18Next) return null;
+      if (!_nextI18Next) return null;
       let {
         userConfig
       } = _nextI18Next;
       const {
-        initialI18nStore
+        initialI18nStore,
+        initialLocale
       } = _nextI18Next;
+      locale = initialLocale;
 
       if (userConfig === null && configOverride === null) {
         throw new Error('appWithTranslation was called without a next-i18next config');

package/dist/es/config/defaultConfig.js

@@ -26,7 +26,7 @@ export const defaultConfig = {
   localePath: LOCALE_PATH,
   localeStructure: LOCALE_STRUCTURE,
   react: {
-    useSuspense: true
+    useSuspense: false
   },
   reloadOnPrerender: false,
   serializeConfig: true,

package/dist/es/serverSideTranslations.js

@@ -89,6 +89,7 @@ export const serverSideTranslations = async (initialLocale, namespacesRequired =
   return {
     _nextI18Next: {
       initialI18nStore,
+      initialLocale,
       userConfig: config.serializeConfig ? userConfig : null
     }
   };

package/dist/esm/appWithTranslation.js

@@ -17,17 +17,20 @@ export var appWithTranslation = function appWithTranslation(WrappedComponent) {
   var configOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
   var AppWithTranslation = function AppWithTranslation(props) {
-    var _nextI18Next = props.pageProps._nextI18Next;
-    var locale = props.router.locale; // Memoize the instance and only re-initialize when either:
+    var _ref = props.pageProps,
+        _nextI18Next = _ref._nextI18Next;
+    var locale = null; // Memoize the instance and only re-initialize when either:
     // 1. The route changes (non-shallowly)
     // 2. Router locale changes
 
     var i18n = useMemo(function () {
       var _userConfig;
 
-      if (!locale || !_nextI18Next) return null;
+      if (!_nextI18Next) return null;
       var userConfig = _nextI18Next.userConfig;
-      var initialI18nStore = _nextI18Next.initialI18nStore;
+      var initialI18nStore = _nextI18Next.initialI18nStore,
+          initialLocale = _nextI18Next.initialLocale;
+      locale = initialLocale;
 
       if (userConfig === null && configOverride === null) {
         throw new Error('appWithTranslation was called without a next-i18next config');

package/dist/esm/config/defaultConfig.js

@@ -28,7 +28,7 @@ export var defaultConfig = {
   localePath: LOCALE_PATH,
   localeStructure: LOCALE_STRUCTURE,
   react: {
-    useSuspense: true
+    useSuspense: false
   },
   reloadOnPrerender: false,
   serializeConfig: true,

package/dist/esm/serverSideTranslations.js

@@ -161,6 +161,7 @@ export var serverSideTranslations = /*#__PURE__*/function () {
             return _context.abrupt("return", {
               _nextI18Next: {
                 initialI18nStore: initialI18nStore,
+                initialLocale: initialLocale,
                 userConfig: config.serializeConfig ? userConfig : null
               }
             });

package/dist/types/appWithTranslation.d.ts

@@ -8,4 +8,4 @@ declare type AppProps = NextJsAppProps & {
     pageProps: SSRConfig;
 };
 export declare let globalI18n: I18NextClient | null;
-export declare const appWithTranslation: (WrappedComponent: React.ComponentType<AppProps> | React.ElementType<AppProps>, configOverride?: UserConfig | null) => ((props: AppProps) => JSX.Element) & hoistNonReactStatics.NonReactStatics<React.ComponentClass<AppProps, any> | React.FunctionComponent<AppProps>, {}>;
+export declare const appWithTranslation: <Props extends AppProps = AppProps>(WrappedComponent: React.ComponentType<Props>, configOverride?: UserConfig | null) => ((props: Props) => JSX.Element) & hoistNonReactStatics.NonReactStatics<React.ComponentType<Props>, {}>;

package/dist/types/types.d.ts

@@ -36,6 +36,7 @@ export declare type CreateClientReturn = {
 export declare type SSRConfig = {
     _nextI18Next: {
         initialI18nStore: any;
+        initialLocale: string;
         userConfig: UserConfig | null;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-i18next",
-  "version": "8.10.0",
+  "version": "9.2.0",
   "repository": "git@github.com:isaachinman/next-i18next.git",
   "author": "Isaac Hinman <isaac@isaachinman.com>",
   "funding": {
@@ -12,7 +12,7 @@
   "types": "dist/types/types.d.ts",
   "license": "MIT",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "description": "The easiest way to translate your NextJs apps.",
   "keywords": [
@@ -107,12 +107,15 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "core-js": "^3",
     "hoist-non-react-statics": "^3.2.0",
-    "i18next": "^20.1.0",
+    "i18next": "^21.5.3",
     "i18next-fs-backend": "^1.0.7",
     "react-i18next": "^11.8.13"
   },
   "peerDependencies": {
     "next": ">= 10.0.0",
     "react": ">= 16.8.0"
+  },
+  "resolutions": {
+    "i18next-fs-backend": ">=1.1.4"
   }
 }