next-translate 2.0.0 → 2.0.2

package/README.md

@@ -240,7 +240,7 @@ In the configuration file you can use both the configuration that we specified h
 | `loggerEnvironment`          | String to define if the logger should run in the browser, in node or both                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `"node"` | `"browser"` | `"both"`                      | `"browser"` |     |
 | `logBuild`        | Each page has a log indicating: namespaces, current language and method used to load the namespaces. With this you can disable it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `Boolean`                       | `true`                                                                          |
 | `loader`        | If you wish to disable the webpack loader and manually load the namespaces on each page, we give you the opportunity to do so by disabling this option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `Boolean`                       | `true`                                                                          |
-| `interpolation`   | Change the delimeter that is used for interpolation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{prefix: string; suffix: string, formatter: function }` | `{prefix: '{{', suffix: '}}'}`
+| `interpolation`   | Change the delimiter that is used for interpolation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{prefix: string; suffix: string, formatter: function }` | `{prefix: '{{', suffix: '}}'}`
 | `keySeparator`   | Change the separator that is used for nested keys. Set to `false` to disable keys nesting in JSON translation files. Can be useful if you want to use natural text as keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` | `false` | `'.'`
 | `nsSeparator`   | char to split namespace from key. You should set it to `false` if you want to use natural text as keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` | `false` | `':'`
 | `defaultNS`   | default namespace used if not passed to `useTranslation` or in the translation key.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string` | `undefined`
@@ -445,7 +445,7 @@ Remember that `['dynamic']` namespace should **not** be listed on `pages` config
 Asynchronous function to load the `t` function outside components / pages. It works on both server-side and client-side.
 
 Unlike the useTranslation hook, we can use here any namespace, it doesn't have to be a namespace defined in the "pages" configuration. It downloads the namespace indicated as a parameter on runtime.  
-You can load multiple namespaces by giving an array as a paramater, in this case the default namespace will be the fist one.   
+You can load multiple namespaces by giving an array as a parameter, in this case the default namespace will be the fist one.   
 
 Example inside `getStaticProps`:
 
@@ -553,7 +553,7 @@ function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
 
-// Wraping your _app.js
+// Wrapping your _app.js
 export default appWithI18n(MyApp, {
   ...i18nConfig,
   // Set to false if you want to load all the namespaces on _app.js getInitialProps
@@ -907,6 +907,8 @@ If you want to change it you can use :
 
 When it comes to server components and client components, it can be challenging to load the same thing on different pages. To simplify this process, we have **extracted all the complexity** using the **[`next-translate-plugin`](https://github.com/aralroca/next-translate-plugin)**.
 
+If you're interested in learning more about how Next-translate works with the new Next.js 13 app dir paradigm, check out **[this article](https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8)** for a detailed explanation. 
+
 ### Regarding translations:
 
 If you use the "app" folder instead of the "pages" folder, the `next-translate-plugin` will automatically detect the change, and you won't need to touch any of the Next-translate configuration. The only difference is that the "pages" configuration property will reference the pages located within the "app" folder.
@@ -926,14 +928,66 @@ module.exports = {
 
 By simply changing the "pages" folder to "app," you can consume translations within your pages using the **`useTranslation`** hook or the **`Trans`** component. You will still see the log (if enabled) to know which namespaces are loaded on each page, and everything else should be the same.
 
+**🌊 Server page/component (+0kb): `app/page.js`:**
+```js
+import useTranslation from 'next-translate/useTranslation'
+
+export default function HomePage() {
+  const { t, lang } = useTranslation('home')
+
+  return <h1>{t('title')}</h1>
+}
+```
+
+**🏝️ Client page/component (+498B): `app/checkout/page.js`**
+```js
+"use client"
+import useTranslation from 'next-translate/useTranslation'
+
+export default function CheckoutPage() {
+  const { t, lang } = useTranslation('checkout')
+
+  return <h1>{t('title')}</h1>
+}
+```
+
 ### Regarding routing:
 
-The routing is part of the core of Next.js _(not from this library)_, but direct routing support is not yet available with the beta version of Next 13's app directory. As a workaround, Next.js recommends configuring it as described here: 
-- https://beta.nextjs.org/docs/guides/internationalization.
+Next.js 10 introduced [i18n routing](https://nextjs.org/docs/advanced-features/i18n-routing) support, allowing pages to be rendered by navigating to `/es/page-name`, where the page `pages/page-name.js` was accessed using the `useRouter` hook to obtain the `locale`. 
 
-The [`next-translate-plugin`](https://github.com/aralroca/next-translate-plugin) automatically detects the **"lang" parameter**. So, without any rewrite, you can test if your translations work by entering your page with the "lang" parameter. For example: `/some-page?lang=en`.
+However, since the pages have been moved from the `pages` dir to the **app dir**, this i18n routing **no longer works correctly**.
 
-With this in mind, you can do any rewrite as described in the Next documentation, and if the final page has this parameter, everything should work without any additional manual changes. For example, if you rewrite `/en-US/some-page` to `/some-page?lang=en-US`, then the `useTranslation` will look for translations in `en-US` without needing to pass this parameter.
+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.
+
+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.
+
+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:
+
+```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)
+  return NextResponse.rewrite(request.nextUrl)
+}
+```
+
+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:
+
+```js
+<Link href={`/?lang=${locale}`} as={`/${locale}`}>{locale}</Link>
+```
+
+If you need more i18n routing features like automatic locale detection you can follow these steps from the Next.js documentation:
+
+- https://beta.nextjs.org/docs/guides/internationalization.
 
 ## 15. Demos
 
@@ -1059,11 +1113,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/wuifdesign"><img src="https://avatars.githubusercontent.com/u/5678318?v=4?s=100" width="100px;" alt="Wuif"/><br /><sub><b>Wuif</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=wuifdesign" title="Code">💻</a></td>
     </tr>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcesengel"><img src="https://avatars.githubusercontent.com/u/6208890?v=4?s=100" width="100px;" alt="Marces Engel"/><br /><sub><b>Marces Engel</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=marcesengel" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://michal.bar"><img src="https://avatars.githubusercontent.com/u/9134970?v=4?s=100" width="100px;" alt="Michał Bar"/><br /><sub><b>Michał Bar</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=MrPumpking" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Dragate"><img src="https://avatars.githubusercontent.com/u/28112929?v=4?s=100" width="100px;" alt="Dragate"/><br /><sub><b>Dragate</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=Dragate" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcesengel"><img src="https://avatars.githubusercontent.com/u/6208890?v=4?s=100" width="100px;" alt="Marces Engel"/><br /><sub><b>Marces Engel</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=marcesengel" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/vascosilvaa"><img src="https://avatars.githubusercontent.com/u/16561642?v=4?s=100" width="100px;" alt="Vasco Silva"/><br /><sub><b>Vasco Silva</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=vascosilvaa" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/StLyn4"><img src="https://avatars.githubusercontent.com/u/73965070?v=4?s=100" width="100px;" alt="Vsevolod Volkov"/><br /><sub><b>Vsevolod Volkov</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=StLyn4" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/felixonmars"><img src="https://avatars.githubusercontent.com/u/1006477?v=4?s=100" width="100px;" alt="Felix Yan"/><br /><sub><b>Felix Yan</b></sub></a><br /><a href="https://github.com/aralroca/next-translate/commits?author=felixonmars" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

package/lib/cjs/loadNamespaces.js

@@ -53,10 +53,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.log = void 0;
 var getConfig_1 = __importDefault(require("./getConfig"));
 var getPageNamespaces_1 = __importDefault(require("./getPageNamespaces"));
-var colorEnabled = process.env.NODE_DISABLE_COLORS == null &&
-    process.env.NO_COLOR == null &&
-    process.env.TERM !== 'dumb' &&
-    process.env.FORCE_COLOR !== '0';
 function loadNamespaces(config) {
     var _a, _b;
     if (config === void 0) { config = {}; }
@@ -113,7 +109,11 @@ function removeTrailingSlash(path) {
 function log(conf, _a) {
     var page = _a.page, lang = _a.lang, namespaces = _a.namespaces;
     if (conf.logBuild !== false && typeof window === 'undefined') {
-        var color = function (c) { return (colorEnabled ? "\u001B[36m".concat(c, "\u001B[0m") : c); };
+        var colorEnabled_1 = process.env.NODE_DISABLE_COLORS == null &&
+            process.env.NO_COLOR == null &&
+            process.env.TERM !== 'dumb' &&
+            process.env.FORCE_COLOR !== '0';
+        var color = function (c) { return (colorEnabled_1 ? "\u001B[36m".concat(c, "\u001B[0m") : c); };
         console.log(color('next-translate'), "- compiled page:", color(page), '- locale:', color(lang), '- namespaces:', color(namespaces.join(', ')), '- used loader:', color(conf.loaderName || '-'));
     }
 }

package/lib/esm/loadNamespaces.js

@@ -47,10 +47,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import getConfig from './getConfig';
 import getPageNamespaces from './getPageNamespaces';
-var colorEnabled = process.env.NODE_DISABLE_COLORS == null &&
-    process.env.NO_COLOR == null &&
-    process.env.TERM !== 'dumb' &&
-    process.env.FORCE_COLOR !== '0';
 export default function loadNamespaces(config) {
     var _a, _b;
     if (config === void 0) { config = {}; }
@@ -106,7 +102,11 @@ function removeTrailingSlash(path) {
 export function log(conf, _a) {
     var page = _a.page, lang = _a.lang, namespaces = _a.namespaces;
     if (conf.logBuild !== false && typeof window === 'undefined') {
-        var color = function (c) { return (colorEnabled ? "\u001B[36m".concat(c, "\u001B[0m") : c); };
+        var colorEnabled_1 = process.env.NODE_DISABLE_COLORS == null &&
+            process.env.NO_COLOR == null &&
+            process.env.TERM !== 'dumb' &&
+            process.env.FORCE_COLOR !== '0';
+        var color = function (c) { return (colorEnabled_1 ? "\u001B[36m".concat(c, "\u001B[0m") : c); };
         console.log(color('next-translate'), "- compiled page:", color(page), '- locale:', color(lang), '- namespaces:', color(namespaces.join(', ')), '- used loader:', color(conf.loaderName || '-'));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-translate",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
   "license": "MIT",
   "keywords": [