Support i18next 22, react-i18next 12 and move both to peer-deps

CHANGELOG.md

@@ -1,6 +1,22 @@
 ## next
 
-- breaking: drop nextjs < 12.0.0 and react < 17.0.2 in [#1983](https://github.com/i18next/next-i18next/pull/1983) 
+Although it is a major, existing code should not be impacted. Only the install. 
+Read also the [UPGRADING](https://github.com/i18next/next-i18next/blob/master/UPGRADING.md) document
+to know more.
+
+- **breaking**: react-i18next and i18next are now peer-dependencies and must be installed
+  in the consuming app, see [#1966](https://github.com/i18next/next-i18next/pull/1966)
+
+  ```bash
+  npm install react-i18next i18next --save  # NPM
+  yarn add react-i18next i18next            # Yarn
+  pnpm add react-i18next i18next --save     # PNPM
+  ```
+
+  If you encounter any issue, please read the [Troubleshoot](https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md) doc.
+
+- **new:**: Upgrade to [i18next v22](https://github.com/i18next/i18next/releases) and react-i18next v12, see [#1966](https://github.com/i18next/next-i18next/pull/1966)
+- **breaking**: drop nextjs < 12.0.0 and react < 17.0.2 in [#1983](https://github.com/i18next/next-i18next/pull/1983) 
 - breaking: drop node 12.x support, requires 14.x. Recommended minimum to `^14.13.1`, 
   see [#1974](https://github.com/i18next/next-i18next/pull/1974)
 

README.md

@@ -41,8 +41,8 @@ Now our Next.js app is fully translatable!
 
 ### 1. Installation
 
-```jsx
-yarn add next-i18next
+```bash
+yarn add next-i18next react-i18next i18next
 ```
 
 You need to also have `react` and `next` installed.

UPGRADING.md

@@ -0,0 +1,16 @@
+## Version 13.x
+
+Both `i18next` and `react-i18next` have been moved to [peerDependencies](https://github.com/npm/rfcs/blob/main/implemented/0030-no-install-optional-peer-deps.md)
+and must be installed part of `next-i18next`. When upgrading don't forget to add them to your dependencies:
+
+```bash
+npm install react-i18next i18next --save  # NPM
+yarn add react-i18next i18next            # Yarn
+pnpm add react-i18next i18next --save     # PNPM
+```
+
+This move was done in the hope to avoid issues regarding duplicates. See the
+[TROUBLESHOOT](https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#multiple-instances)
+for more info. In the future it will also allow to support multiple ranges.
+
+

examples/simple/package.json

@@ -9,9 +9,11 @@
     "start": "next start -p ${PORT:=3000}"
   },
   "dependencies": {
+    "i18next": "22.0.2",
     "next": "12.3.1",
     "next-i18next": "12.1.0",
     "react": "18.2.0",
+    "react-i18next": "12.0.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {

examples/simple/types.d/i18next.d.ts.future

@@ -0,0 +1,25 @@
+/**
+ * If you want to enable locale keys typechecking and enhance IDE experience.
+ *
+ * Requires `resolveJsonModule:true` in your tsconfig.json.
+ *
+ * @link https://www.i18next.com/overview/typescript
+ */
+import 'react-i18next'
+
+import type common from '../public/locales/en/common.json'
+import type footer from '../public/locales/en/footer.json'
+import type secondPage from '../public/locales/en/second-page.json'
+
+interface I18nNamespaces {
+    common: typeof common
+    footer: typeof footer
+    'second-page': typeof secondPage
+}
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'common'
+    resources: I18nNamespaces
+  }
+}

examples/simple/types.d/react-i18next.d.ts

@@ -1,7 +1,8 @@
 /**
- * Types augmentation for translation keys to allow to typecheck
- * and suggesting keys to the t function. In case it's too slow
- * you can opt out by commenting the following code.
+ * If you want to enable locale keys typechecking and enhance IDE experience.
+ *
+ * Requires `resolveJsonModule:true` in your tsconfig.json.
+ *
  * @link https://www.i18next.com/overview/typescript
  */
 import 'react-i18next'

examples/ssg/package.json

@@ -15,9 +15,13 @@
     "downloadLocales": "locize download --project-id=0842ada9-1d1d-4d48-ab27-08f6a132f558 --ver=latest --clean=true --path=./public/locales"
   },
   "dependencies": {
+    "i18next": "22.0.2",
     "next": "12.3.1",
     "next-i18next": "12.1.0",
-    "next-language-detector": "1.0.2"
+    "next-language-detector": "1.0.2",
+    "react": "18.2.0",
+    "react-i18next": "12.0.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "eslint-config-next": "12.3.1",

package.json

@@ -127,12 +127,14 @@
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "gh-release": "6.0.4",
     "husky": "^3.0.0",
+    "i18next": "^22.0.2",
     "jest": "^26.6.3",
     "next": "^12.2.5",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "size-limit": "8.1.0",
+    "react-i18next": "^12.0.0",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.7.4",
     "webpack": "5.74.0"
@@ -142,12 +144,12 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "core-js": "^3",
     "hoist-non-react-statics": "^3.3.2",
-    "i18next": "^21.9.1",
-    "i18next-fs-backend": "^1.1.5",
-    "react-i18next": "^11.18.4"
+    "i18next-fs-backend": "^1.1.5"
   },
   "peerDependencies": {
-    "next": ">= 12.0.0",
-    "react": ">= 17.0.2"
+    "i18next": "^22.0.2",
+    "next": ">= 10.0.0",
+    "react": ">= 16.8.0",
+    "react-i18next": "^12.0.0"
   }
 }

src/types.ts

@@ -5,7 +5,6 @@ import {
   Trans,
   withTranslation,
   WithTranslation as ReactI18nextWithTranslation,
-  Resources,
   DefaultNamespace,
   Translation,
 } from 'react-i18next'
@@ -64,6 +63,5 @@ export {
   Trans,
   Translation,
   withTranslation,
-  Resources,
   DefaultNamespace,
 }