next-i18next 8.7.0 → 9.0.0

package/README.md

@@ -129,7 +129,7 @@ Note that `serverSideTranslations` must be imported from `next-i18next/serverSid
 
 Also, note that `serverSideTranslations` is not compatible with `getInitialProps`, as it _only_ can execute in a server environment, whereas `getInitialProps` is called on the client side when navigating between pages.
 
-The `serverSideTranslations` HOC is primarily responsible for passing translations and configuration options into pages, as props.
+The `serverSideTranslations` HOC is primarily responsible for passing translations and configuration options into pages, as props – you need to add it to any page that has translations.
 
 ### useTranslation
 
@@ -236,6 +236,24 @@ This option will reload your translations whenever `serverSideTranslations` is c
 
 All other [i18next options](https://www.i18next.com/overview/configuration-options) can be passed in as well.
 
+#### Loading Namespaces Dynamically Client Side
+
+In some use cases, you might want to load a translation file dynamically without having to use `serverSideTranslations`. This can be especially useful for lazy-loaded components that you don't want slowing down pages.
+
+This can easily be done by using [addResourceBundle](https://www.i18next.com/how-to/add-or-load-translations#add-after-init):
+
+```tsx
+import { i18n } from 'next-i18next'
+
+const Component = () => {
+  const { locale } = useRouter()
+
+  useEffect(() => {
+    i18n.addResourceBundle(locale, '<namespace name>')
+  }, [])
+}
+```
+
 ## Migration to v8
 
 To migrate from previous versions to the version 8, check out the [v8-migration guide](https://github.com/isaachinman/next-i18next/tree/master/docs/v8-migration.md)

package/dist/commonjs/appWithTranslation.js

@@ -67,7 +67,7 @@ var _reactI18next = require("react-i18next");
 
 var _createConfig = require("./config/createConfig");
 
-var _createClient2 = _interopRequireDefault(require("./createClient"));
+var _createClient = _interopRequireDefault(require("./createClient"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -86,18 +86,20 @@ var appWithTranslation = function appWithTranslation(WrappedComponent) {
   var configOverride = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
   var AppWithTranslation = function AppWithTranslation(props) {
-    var _props$pageProps;
+    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 = null;
-    var locale = null;
-
-    if (props !== null && props !== void 0 && (_props$pageProps = props.pageProps) !== null && _props$pageProps !== void 0 && _props$pageProps._nextI18Next) {
+    var i18n = (0, _react.useMemo)(function () {
       var _userConfig;
 
-      var userConfig = props.pageProps._nextI18Next.userConfig;
-      var _props$pageProps$_nex = props.pageProps._nextI18Next,
-          initialI18nStore = _props$pageProps$_nex.initialI18nStore,
-          initialLocale = _props$pageProps$_nex.initialLocale;
+      if (!_nextI18Next) return null;
+      var userConfig = _nextI18Next.userConfig;
+      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');
@@ -111,21 +113,15 @@ var appWithTranslation = function appWithTranslation(WrappedComponent) {
         throw new Error('appWithTranslation was called without config.i18n');
       }
 
-      locale = initialLocale;
-
-      var _createClient = (0, _createClient2["default"])(_objectSpread(_objectSpread({}, (0, _createConfig.createConfig)(_objectSpread(_objectSpread({}, userConfig), {}, {
-        lng: initialLocale
+      var instance = (0, _createClient["default"])(_objectSpread(_objectSpread({}, (0, _createConfig.createConfig)(_objectSpread(_objectSpread({}, userConfig), {}, {
+        lng: locale
       }))), {}, {
-        lng: initialLocale,
+        lng: locale,
         resources: initialI18nStore
-      }));
-
-      i18n = _createClient.i18n;
-      (0, _react.useMemo)(function () {
-        exports.globalI18n = globalI18n = i18n;
-      }, [i18n]);
-    }
-
+      })).i18n;
+      exports.globalI18n = globalI18n = instance;
+      return instance;
+    }, [_nextI18Next, locale]);
     return i18n !== null ? __jsx(_reactI18next.I18nextProvider, {
       i18n: i18n
     }, __jsx(WrappedComponent, (0, _extends2["default"])({

package/dist/es/appWithTranslation.js

@@ -9,21 +9,25 @@ export { Trans, useTranslation, withTranslation } from 'react-i18next';
 export let globalI18n = null;
 export const appWithTranslation = (WrappedComponent, configOverride = null) => {
   const AppWithTranslation = props => {
-    var _props$pageProps;
-
-    let i18n = null;
-    let locale = null;
-
-    if (props !== null && props !== void 0 && (_props$pageProps = props.pageProps) !== null && _props$pageProps !== void 0 && _props$pageProps._nextI18Next) {
+    const {
+      _nextI18Next
+    } = props.pageProps;
+    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 (!_nextI18Next) return null;
       let {
         userConfig
-      } = props.pageProps._nextI18Next;
+      } = _nextI18Next;
       const {
         initialI18nStore,
         initialLocale
-      } = props.pageProps._nextI18Next;
+      } = _nextI18Next;
+      locale = initialLocale;
 
       if (userConfig === null && configOverride === null) {
         throw new Error('appWithTranslation was called without a next-i18next config');
@@ -37,20 +41,15 @@ export const appWithTranslation = (WrappedComponent, configOverride = null) => {
         throw new Error('appWithTranslation was called without config.i18n');
       }
 
-      locale = initialLocale;
-      ({
-        i18n
-      } = createClient({ ...createConfig({ ...userConfig,
-          lng: initialLocale
+      const instance = createClient({ ...createConfig({ ...userConfig,
+          lng: locale
         }),
-        lng: initialLocale,
+        lng: locale,
         resources: initialI18nStore
-      }));
-      useMemo(() => {
-        globalI18n = i18n;
-      }, [i18n]);
-    }
-
+      }).i18n;
+      globalI18n = instance;
+      return instance;
+    }, [_nextI18Next, locale]);
     return i18n !== null ? /*#__PURE__*/React.createElement(I18nextProvider, {
       i18n: i18n
     }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({

package/dist/esm/appWithTranslation.js

@@ -17,18 +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 _props$pageProps;
+    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 = null;
-    var locale = null;
-
-    if (props !== null && props !== void 0 && (_props$pageProps = props.pageProps) !== null && _props$pageProps !== void 0 && _props$pageProps._nextI18Next) {
+    var i18n = useMemo(function () {
       var _userConfig;
 
-      var userConfig = props.pageProps._nextI18Next.userConfig;
-      var _props$pageProps$_nex = props.pageProps._nextI18Next,
-          initialI18nStore = _props$pageProps$_nex.initialI18nStore,
-          initialLocale = _props$pageProps$_nex.initialLocale;
+      if (!_nextI18Next) return null;
+      var userConfig = _nextI18Next.userConfig;
+      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');
@@ -42,21 +44,15 @@ export var appWithTranslation = function appWithTranslation(WrappedComponent) {
         throw new Error('appWithTranslation was called without config.i18n');
       }
 
-      locale = initialLocale;
-
-      var _createClient = createClient(_objectSpread(_objectSpread({}, createConfig(_objectSpread(_objectSpread({}, userConfig), {}, {
-        lng: initialLocale
+      var instance = createClient(_objectSpread(_objectSpread({}, createConfig(_objectSpread(_objectSpread({}, userConfig), {}, {
+        lng: locale
       }))), {}, {
-        lng: initialLocale,
+        lng: locale,
         resources: initialI18nStore
-      }));
-
-      i18n = _createClient.i18n;
-      useMemo(function () {
-        globalI18n = i18n;
-      }, [i18n]);
-    }
-
+      })).i18n;
+      globalI18n = instance;
+      return instance;
+    }, [_nextI18Next, locale]);
     return i18n !== null ? __jsx(I18nextProvider, {
       i18n: i18n
     }, __jsx(WrappedComponent, _extends({

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-i18next",
-  "version": "8.7.0",
+  "version": "9.0.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": [
@@ -73,7 +73,8 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@testing-library/react": "^11.2.5",
-    "@types/jest": "^26.0.20",
+    "@types/i18next-fs-backend": "^1.1.2",
+    "@types/jest": "^27.0.1",
     "@types/node": "^16.7.1",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
@@ -104,10 +105,9 @@
   "dependencies": {
     "@babel/runtime": "^7.13.17",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/i18next-fs-backend": "^1.0.0",
     "core-js": "^3",
     "hoist-non-react-statics": "^3.2.0",
-    "i18next": "^20.1.0",
+    "i18next": "^21.4.1",
     "i18next-fs-backend": "^1.0.7",
     "react-i18next": "^11.8.13"
   },