next-translate 2.0.6 → 2.3.0

package/I18nProvider.d.ts

@@ -4,4 +4,4 @@ export declare const InternalContext: React.Context<{
     ns: {};
     config: {};
 }>;
-export default function I18nProvider({ lang: lng, namespaces, children, config: newConfig, }: I18nProviderProps): JSX.Element;
+export default function I18nProvider({ lang: lng, namespaces, children, config: newConfig, }: I18nProviderProps): React.JSX.Element;

package/README.md

@@ -957,38 +957,46 @@ Next.js 10 introduced [i18n routing](https://nextjs.org/docs/advanced-features/i
 
 However, since the pages have been moved from the `pages` dir to the **app dir**, this i18n routing **no longer works correctly**.
 
-At Next-translate, we have chosen not to re-implement this functionality, as we aim to be a library for translating pages, rather than routing them. We hope that in the future, this feature will be implemented in the `app` directory, as it is still in beta and many features still need to be supported.
+At Next-translate, we have chosen not to re-implement this functionality, as we aim to be a library for translating pages, rather than routing them. We hope that in the future, this feature will be implemented in the `app` directory.
 
-However, all the support currently available is with the `lang` parameter. That is, `/es/page-name?lang=es` renders the page `app/page-name/page.js`, where we have internal access to the `lang` parameter, and you **do not need** to do **anything extra** other than using the `useTranslation` hook to consume your translations.
+**We recommend the following:**
 
-All the same, if you wish to use the language as a subpath `/es/page-name` without the param, you can utilize middleware to append the `lang` parameter and perform a rewrite:
+- Add the dynamic path `[lang]` to the first level. That is, all your pages will be inside `/app/[lang]`.
+- If you need more control over which languages to support, or to detect the browser language, use the [middleware](https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview) that the Next.js team [recommends here](https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview).
+- Update all the pages inside `i18n.(js|ts)` file to contain the `/[lang]` at the beginning.
 
-```js
-// middleware.ts
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-import i18n from './i18n'
-
-// /es/page-name -> rewrites to -> /es/page-name?lang=es
-export function middleware(request: NextRequest) {
-  const locale = request.nextUrl.locale || i18n.defaultLocale
-  request.nextUrl.searchParams.set('lang', locale)
-  request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, "")
-  return NextResponse.rewrite(request.nextUrl)
+```diff
+module.exports = {
+  locales: ['en', 'ca', 'es'],
+  defaultLocale: 'en',
+  pages: {
+    '*': ['common'],
+-    '/': ['home'],
++    '/[lang]': ['home'],
+-    '/second-page': ['home'],
++    '/[lang]/second-page': ['home'],
+  },
 }
 ```
 
-Here in the middleware, we are not adding the locale as a subpath, but rather eliminating the need to manually add the `lang` parameter. By default, the **subpath still exists**, but you **cannot use `useRouter`** from `next/router` to access the `locale` within the components of the `app` directory. Therefore, we **still need the parameter**, even if we hide it from view.
-
-And to navigate:
+At Next-translate level we **already detect the language automatically** according to `searchParams.get('lang')` and `params.lang`. So you **don't need to configure it for each page**, you can use `next-translate` as **normal** within the server/client pages/components:
 
 ```js
-<Link href={`/?lang=${locale}`} as={`/${locale}`}>{locale}</Link>
-```
+import useTranslation from 'next-translate/useTranslation'
+import Trans from 'next-translate/Trans'
 
-If you need more i18n routing features like automatic locale detection you can follow these steps from the Next.js documentation:
+export default function Page() {
+  const { t, lang } = useTranslation('common')
+
+  return (
+    <>
+      <h1>{t`title`}</h1>
+      <Trans i18nKey="common:another-text" components={[<b />]} />
+    </>
+  )
+}
+```
 
-- https://beta.nextjs.org/docs/guides/internationalization.
 
 ## 15. Demos
 

package/appWithI18n.d.ts

@@ -14,7 +14,7 @@ type NextComponentType<C extends PartialNextContext = PartialNextContext, IP = {
     getInitialProps?(context: C): IP | Promise<IP>;
 };
 export default function appWithI18n(AppToTranslate: NextComponentType, config?: LoaderConfig): {
-    (props: Props): JSX.Element;
+    (props: Props): React.JSX.Element;
     getInitialProps(appCtx: any): Promise<{
         __lang: string;
         __namespaces?: Record<string, object> | undefined;

package/index.d.ts

@@ -86,6 +86,7 @@ declare global {
     var __NEXT_TRANSLATE__: {
         namespaces: Record<string, I18nDictionary>;
         lang: string;
+        pathname?: string;
     };
     namespace NodeJS {
         interface Global {

package/lib/cjs/withTranslationClientComponent.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+function withTranslationClientComponent(Component, i18nConfig) {
+    function WithTranslation(props) {
+        var forceUpdate = (0, react_1.useReducer)(function () { return []; })[1];
+        var isClient = typeof window !== 'undefined';
+        if (isClient && !window.__NEXT_TRANSLATE__) {
+            window.__NEXT_TRANSLATE__ = {
+                lang: i18nConfig.defaultLocale,
+                namespaces: {},
+            };
+            update(false);
+        }
+        if (isClient && !window.i18nConfig) {
+            window.i18nConfig = i18nConfig;
+        }
+        (0, react_1.useEffect)(update);
+        function update(rerender) {
+            if (rerender === void 0) { rerender = true; }
+            var el = document.getElementById('__NEXT_TRANSLATE_DATA__');
+            if (!el)
+                return;
+            var _a = el.dataset, lang = _a.lang, ns = _a.ns, pathname = _a.pathname;
+            var shouldRerender = lang !== window.__NEXT_TRANSLATE__.lang ||
+                pathname !== window.__NEXT_TRANSLATE__.pathname;
+            window.__NEXT_TRANSLATE__ = { lang: lang, namespaces: JSON.parse(ns), pathname: pathname };
+            if (shouldRerender && rerender)
+                forceUpdate();
+        }
+        return react_1.default.createElement(Component, __assign({}, props));
+    }
+    var displayName = Component.displayName || Component.name || 'Component';
+    WithTranslation.displayName = "withTranslationClientComponent(".concat(displayName, ")");
+    return WithTranslation;
+}
+exports.default = withTranslationClientComponent;

package/lib/esm/withTranslationClientComponent.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useEffect, useReducer } from 'react';
+export default function withTranslationClientComponent(Component, i18nConfig) {
+    function WithTranslation(props) {
+        var forceUpdate = useReducer(function () { return []; })[1];
+        var isClient = typeof window !== 'undefined';
+        if (isClient && !window.__NEXT_TRANSLATE__) {
+            window.__NEXT_TRANSLATE__ = {
+                lang: i18nConfig.defaultLocale,
+                namespaces: {},
+            };
+            update(false);
+        }
+        if (isClient && !window.i18nConfig) {
+            window.i18nConfig = i18nConfig;
+        }
+        useEffect(update);
+        function update(rerender) {
+            if (rerender === void 0) { rerender = true; }
+            var el = document.getElementById('__NEXT_TRANSLATE_DATA__');
+            if (!el)
+                return;
+            var _a = el.dataset, lang = _a.lang, ns = _a.ns, pathname = _a.pathname;
+            var shouldRerender = lang !== window.__NEXT_TRANSLATE__.lang ||
+                pathname !== window.__NEXT_TRANSLATE__.pathname;
+            window.__NEXT_TRANSLATE__ = { lang: lang, namespaces: JSON.parse(ns), pathname: pathname };
+            if (shouldRerender && rerender)
+                forceUpdate();
+        }
+        return React.createElement(Component, __assign({}, props));
+    }
+    var displayName = Component.displayName || Component.name || 'Component';
+    WithTranslation.displayName = "withTranslationClientComponent(".concat(displayName, ")");
+    return WithTranslation;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-translate",
-  "version": "2.0.6",
+  "version": "2.3.0",
   "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
   "license": "MIT",
   "keywords": [
@@ -64,35 +64,35 @@
     "tsc": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && node build-packages.js"
   },
   "devDependencies": {
-    "@babel/cli": "7.20.7",
-    "@babel/core": "7.20.12",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-typescript": "7.18.6",
+    "@babel/cli": "7.22.5",
+    "@babel/core": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
     "@testing-library/react": "13.4.0",
-    "@types/jest": "29.2.6",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
-    "@types/webpack": "5.28.0",
-    "babel-jest": "29.3.1",
+    "@types/jest": "29.5.2",
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
+    "@types/webpack": "5.28.1",
+    "babel-jest": "29.5.0",
     "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
     "babel-preset-minify": "0.5.2",
     "cross-env": "7.0.3",
     "express": "4.18.2",
     "husky": "7.0.4",
     "jest": "27.3.1",
-    "next": "13.1.3",
-    "next-router-mock": "0.8.0",
-    "prettier": "2.8.3",
+    "next": "13.4.6",
+    "next-router-mock": "0.9.6",
+    "prettier": "2.8.8",
     "pretty-quick": "3.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "supertest": "6.3.3",
-    "typescript": "4.9.4"
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "next": ">= 10.0.0",
-    "react": ">= 16.8.0"
+    "next": ">= 13.2.5",
+    "react": "18.0.0"
   },
   "prettier": {
     "trailingComma": "es5",
@@ -101,7 +101,7 @@
     "singleQuote": true
   },
   "engines": {
-    "node": ">=14.15.0"
+    "node": ">=16.10.0"
   },
   "jest": {
     "roots": [

package/withTranslationClientComponent/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "withtranslationclientcomponent",
+  "private": true,
+  "main": "../lib/cjs/withTranslationClientComponent.js",
+  "module": "../lib/esm/withTranslationClientComponent.js",
+  "types": "../withTranslationClientComponent.d.ts"
+}

package/withTranslationClientComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { LoaderConfig } from '.';
+export default function withTranslationClientComponent<P extends JSX.IntrinsicAttributes>(Component: React.ComponentType<P>, i18nConfig: LoaderConfig): React.ComponentType<P>;