next-intlayer 4.0.0 → 4.0.2

package/README.md

@@ -17,369 +17,169 @@
   </a>
 </div>
 
-# Intlayer: Next-Level Content Management in JavaScript
+# next-intlayer: NPM Package to internationalize (i18n) an Next.js application
 
-**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make your development stronger and more efficient.
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, Next.js, and Express.js.
 
-## Example of usage
-
-```bash
-.
-├── ClientComponent
-│   ├── index.content.ts
-│   └── index.tsx
-└── ServerComponent
-    ├── index.content.ts
-    └── index.tsx
-```
+**The `next-intlayer` package** allows you to internationalize your Next.js application. It provides context providers and hooks for Next.js internationalization. Additionally, it includes the Next.js plugin for integrating Intlayer with [Webpack](https://webpack.js.org/) or [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
 
-```tsx
-// ./ClientComponent/index.content.ts
+## Why Internationalize Your Next.js Application?
 
-import { type DeclarationContent, t } from "intlayer";
-
-const clientComponentContent = {
-  key: "client-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      fr: "Bonjour le monde",
-      es: "Hola Mundo",
-    }),
-  },
-} satisfies DeclarationContent;
-
-export default clientComponentContent;
-```
-
-```tsx
-// ./ClientComponent/index.tsx
-"use client";
-
-import { useIntlayer } from "next-intlayer";
-
-export const ClientComponent = () => {
-  const { myTranslatedContent } = useIntlayer("client-component");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
+Internationalizing your Next.js application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
 
-## Why Choose Intlayer?
+## Why to integrate Intlayer?
 
 - **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
 - **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
 - **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
-- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
-- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
 
-# Getting Started with Intlayer and Nextjs
+## Installation
 
-Setting up Intlayer in a Next.js application is straightforward:
+Install the necessary package using your preferred package manager:
 
-## Step 1: Install Dependencies
-
-Install the necessary packages using npm:
-
-```bash
-npm install intlayer next-intlayer
-```
-
-```bash
-yarn add intlayer next-intlayer
-```
-
-```bash
-pnpm add intlayer next-intlayer
-```
-
-## Step 2: Configure Your Project
-
-Create a config file to configure the languages of your application:
-
-```typescript
-// intlayer.config.ts
-
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
+```bash packageManager="npm"
+npm install next-intlayer
 ```
 
-To see all available parameters, refer to the [configuration documentation here](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
-
-## Step 3: Integrate Intlayer in Your Next.js Configuration
-
-Configure your Next.js setup to use Intlayer:
-
-```typescript
-// next.config.mjs
-import { withIntlayer } from "next-intlayer/server";
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withIntlayer(nextConfig);
+```bash packageManager="yarn"
+yarn add next-intlayer
 ```
 
-## Step 4: Configure Middleware for Locale Detection
-
-Set up middleware to detect the user's preferred locale:
-
-```typescript
-// src/middleware.ts
-export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
-
-export const config = {
-  matcher: "/((?!api|static|.*\\..*|_next).*)",
-};
+```bash packageManager="pnpm"
+pnpm add next-intlayer
 ```
 
-## Step 5: Define Dynamic Locale Routes
-
-Implement dynamic routing for localized content:
-
-Change `src/app/page.ts` to `src/app/[locale]/page.ts`
-
-Then, implement the generateStaticParams function in your application Layout.
-
-```tsx
-// src/app/layout.tsx
+## Example of usage
 
-import type { ReactNode } from "react";
-import "./globals.css";
+With Intlayer, you can declare your content in a structured way anywhere in your codebase.
 
-export { generateStaticParams } from "next-intlayer"; // Line to insert
+By default, Intlayer scans for files with the extension `.content.{ts,tsx,js,jsx,mjs,cjs}`.
 
-const RootLayout = ({
-  children,
-}: Readonly<{
-  children: ReactNode;
-}>) => children;
+> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
 
-export default RootLayout;
+```bash codeFormat="typescript"
+.
+├── intlayer.config.ts
+└── src
+    └── components
+        ├── ClientComponent
+        │   ├── index.content.ts
+        │   └── index.tsx
+        └── ServerComponent
+            ├── index.content.ts
+            └── index.tsx
 ```
 
-Then add a new layout in your `[locale]` directory:
-
-```tsx
-// src/app/[locale]/layout.tsx
-
-import { type NextLayoutIntlayer } from "next-intlayer";
-import { Inter } from "next/font/google";
-import { getHTMLTextDir } from "intlayer";
-
-const inter = Inter({ subsets: ["latin"] });
+### Declare your content
 
-const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
-  const { locale } = await params;
-  return (
-    <html lang={locale} dir={getHTMLTextDir(locale)}>
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-};
+`next-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
 
-export default LocaleLayout;
-```
+Here’s an example of content declaration:
 
-## Step 6: Declare Your Content
-
-Create and manage your content dictionaries:
-
-```tsx
-// src/app/[locale]/page.content.ts
-import { t, type DeclarationContent } from "intlayer";
+```tsx filePath="src/ClientComponent/index.content.ts" codeFormat="typescript"
+import { type DeclarationContent, t } from "intlayer";
 
-const pageContent = {
-  key: "page",
+const clientComponentContent = {
+  key: "client-component",
   content: {
-    getStarted: {
-      main: t({
-        en: "Get started by editing",
-        fr: "Commencez par éditer",
-        es: "Comience por editar",
-      }),
-      pageLink: "src/app/page.tsx",
-    },
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Less than minus one car",
+      "-1": "Minus one car",
+      "0": "No cars",
+      "1": "One car",
+      ">5": "Some cars",
+      ">19": "Many cars",
+    }),
   },
 } satisfies DeclarationContent;
 
-export default pageContent;
+export default clientComponentContent;
 ```
 
-[See how to declare your Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/en/content_declaration/get_started.md)
-
-## Step 7: Utilize Content in Your Code
+### Utilize Content in Your Code
 
-Access your content dictionaries throughout your application:
+Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:
 
-```tsx
-// src/app/[locale]/page.tsx
+```tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
+"use client";
 
-import { ClientComponentExample } from "@components/ClientComponentExample";
-import { LocaleSwitcher } from "@components/LangSwitcherDropDown";
-import { NestedServerComponentExample } from "@components/NestedServerComponentExample";
-import { ServerComponentExample } from "@components/ServerComponentExample";
-import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
-import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
 
-const Page: NextPageIntlayer = async ({ params }) => {
-  const { locale } = await params;
-  return (
-  const content = useIntlayer("page", locale);
+export const ClientComponentExample: FC = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
 
   return (
-    <>
-      <p>
-        {content.getStarted.main}
-        <code>{content.getStarted.pageLink}</code>
-      </p>
-      {/**
-       *   IntlayerServerProvider is used to provide the locale to the server children
-       *   Don't work if set in the layout
-       */}
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-      {/**
-       *   IntlayerClientProvider is used to provide the locale to the client children
-       *   Can be set in any parent component, including the layout
-       */}
-      <IntlayerClientProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerClientProvider>
-    </>
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
   );
 };
-
-export default Page;
 ```
 
-```tsx
-// src/components/ClientComponentExample.tsx
-
+```jsx {3,6} fileName="src/components/ClientComponentExample.mjx" codeFormat="esm"
 "use client";
 
 import { useIntlayer } from "next-intlayer";
 
-export const ClientComponentExample = () => {
-  const content = useIntlayer("client-component-example"); // Create related content declaration
+const ClientComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
 
   return (
     <div>
-      <h2>{content.title} </h2>
-      <p>{content.content}</p>
+      <p>{myTranslatedContent}</p>
     </div>
   );
 };
 ```
 
-```tsx
-// src/components/ServerComponentExample.tsx
+```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+"use client";
 
-import { useIntlayer } from "next-intlayer/server";
+const { useIntlayer } = require("next-intlayer");
 
-export const ServerComponentExample = () => {
-  const content = useIntlayer("server-component-example"); // Create related content declaration
+const ClientComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
 
   return (
     <div>
-      <h2>{content.title} </h2>
-      <p>{content.content}</p>
+      <p>{myTranslatedContent}</p>
     </div>
   );
 };
 ```
 
-> Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
->
-> ```tsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> ```
-
-## (Optional) Step 8: Internationalization of your metadata
-
-In the case you want to internationalize your metadata, such as the title of your page, you can use the `generateMetadata` function provided by NextJS. Inside the function use the `getTranslationContent` function to translate your metadata.
-
-```typescript
-// src/app/[locale]/metadata.ts
-
-import { type IConfigLocales, getTranslationContent } from 'intlayer';
-import type { Metadata } from 'next';
-import type { LocalParams } from 'next-intlayer';
-
-export const generateMetadata = async ({
-  params,
-}: LocalPromiseParams): Promise<Metadata> => {
-  const { locale } = await params;
-
-
-  const t = <T>(content: IConfigLocales<T>) =>
-    getTranslationContent(content, locale);
-
-  return {
-    title: t<string>({
-      en: 'My title',
-      fr: 'Mon titre',
-      es: 'Mi título',
-    }),
-    description: t({
-      en: 'My description',
-      fr: 'Ma description',
-      es: 'Mi descripción',
-    }),
-
-};
-```
-
-## (Optional) Step 9: Change the language of your content
+## Mastering the internationalization of your Next.js application
 
-To change the language of your content, you can use the `setLocale` function provided by the `useLocale` hook. This function allows you to set the locale of the application and update the content accordingly.
+Intlayer provides a lot of features to help you internationalize your Next.js application. Here are some of the key features:
 
-```tsx
-import { Locales } from "intlayer";
-import { useLocale } from "next-intlayer";
+- **Internationalization of server components**: Intlayer allows you to internationalize your server components in the same way as your client components. This means that you can use the same content declarations for both client and server components.
+- **Middleware for Locale Detection**: Intlayer provides middleware to detect the user's preferred locale. This middleware is used to detect the user's preferred locale and redirect them to the appropriate URL as specified in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
+- **Internationalization of metadata**: Intlayer provides a way to internationalize your metadata, such as the title of your page, using the `generateMetadata` function provided by Next.js. You can use the `getTranslationContent` function to translate your metadata.
+- **Internationalization of sitemap.xml and robots.txt**: Intlayer allows you to internationalize your sitemap.xml and robots.txt files. You can use the `getMultilingualUrls` function to generate multilingual URLs for your sitemap.
+- **Internationalization of URLs**: Intlayer allows you to internationalize your URLs by using the `getMultilingualUrls` function. This function generates multilingual URLs for your sitemap.
 
-const MyComponent = () => {
-  const { setLocale } = useLocale();
+**To learn more about these features, refer to the [Next.js Internationalization (i18n) with Intlayer and Next.js 15 App Router](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_15.md) guide.**
 
-  return (
-    <button onClick={() => setLocale(Locales.English)}>Change Language</button>
-  );
-};
-```
+## Functions provided by `next-intlayer` package
 
-## Configure TypeScript
+The `next-intlayer` package also provides some functions to help you to internationalize your application.
 
-Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.
+- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/t.md)
+- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useIntlayer.md)
+- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useDictionary.md)
+- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useLocale.md)
+- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useIntlayerAsync.md)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+## Read about Intlayer
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+- [Intlayer Website](https://intlayer.org)
+- [Intlayer Documentation](https://intlayer.org/docs)
+- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
 
-Ensure your TypeScript configuration includes the autogenerated types.
-
-```json5
-// tsconfig.json
-
-{
-  // your custom config
-  "include": [
-    "src",
-    "types", // <- Include the auto generated types
-  ],
-}
-```
+- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)

package/dist/cjs/server/withIntlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n  nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n  if (typeof nextConfig !== 'object') nextConfig = {};\n\n  const intlayerConfig = getConfiguration();\n\n  // Set all configuration values as environment variables\n  const env = formatEnvVariable('next');\n\n  const { mainDir, baseDir } = intlayerConfig.content;\n  const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n  const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n  return Object.assign({}, nextConfig, {\n    env: { ...nextConfig.env, ...env },\n\n    serverExternalPackages: [\n      ...(nextConfig.serverExternalPackages ?? []),\n      'esbuild',\n      'module',\n      'fs',\n      'chokidar',\n      'fsevents',\n    ],\n\n    experimental: {\n      ...(nextConfig.experimental ?? {}),\n      // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n      turbo: {\n        ...(nextConfig.experimental?.turbo ?? {}),\n        resolveAlias: {\n          ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n          '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n        },\n\n        rules: {\n          '*.node': {\n            as: '*.node',\n            loaders: ['node-loader'],\n          },\n        },\n      },\n    },\n\n    webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n      if (nextConfig.webpack) {\n        // Invoke the existing webpack config if it exists\n        config = nextConfig.webpack(config, options);\n      }\n\n      config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n        relativeDictionariesPath\n      );\n\n      config.externals.push({\n        esbuild: 'esbuild',\n        module: 'module',\n        fs: 'fs',\n        chokidar: 'chokidar',\n        fsevents: 'fsevents',\n      });\n      config.module.rules.push({\n        test: /\\.node$/,\n        loader: 'node-loader',\n      });\n\n      const { isServer, nextRuntime } = options;\n\n      // Apply IntLayerPlugin only on the server-side\n      if (isServer && nextRuntime === 'nodejs') {\n        config.plugins.push(new IntLayerPlugin());\n      }\n\n      return config;\n    },\n  } satisfies Partial<NextConfig>);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwC;AACxC,oBAAoD;AACpD,qBAA+B;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,qBAAiB,gCAAiB;AAGxC,QAAM,UAAM,iCAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,uBAAmB,kBAAK,SAAS,kBAAkB;AACzD,QAAM,+BAA2B,sBAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,oCAAgC,qBAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,QAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,8BAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}
+{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n  nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n  if (typeof nextConfig !== 'object') nextConfig = {};\n\n  const intlayerConfig = getConfiguration();\n\n  // Format all configuration values as environment variables\n  const env = formatEnvVariable('next');\n\n  const { mainDir, baseDir } = intlayerConfig.content;\n  const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n  const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n  return Object.assign({}, nextConfig, {\n    env: { ...nextConfig.env, ...env },\n\n    serverExternalPackages: [\n      ...(nextConfig.serverExternalPackages ?? []),\n      'esbuild',\n      'module',\n      'fs',\n      'chokidar',\n      'fsevents',\n    ],\n\n    experimental: {\n      ...(nextConfig.experimental ?? {}),\n      // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n      turbo: {\n        ...(nextConfig.experimental?.turbo ?? {}),\n        resolveAlias: {\n          ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n          '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n        },\n\n        rules: {\n          '*.node': {\n            as: '*.node',\n            loaders: ['node-loader'],\n          },\n        },\n      },\n    },\n\n    webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n      if (nextConfig.webpack) {\n        // Invoke the existing webpack config if it exists\n        config = nextConfig.webpack(config, options);\n      }\n\n      config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n        relativeDictionariesPath\n      );\n\n      config.externals.push({\n        esbuild: 'esbuild',\n        module: 'module',\n        fs: 'fs',\n        chokidar: 'chokidar',\n        fsevents: 'fsevents',\n      });\n      config.module.rules.push({\n        test: /\\.node$/,\n        loader: 'node-loader',\n      });\n\n      const { isServer, nextRuntime } = options;\n\n      // Apply IntLayerPlugin only on the server-side\n      if (isServer && nextRuntime === 'nodejs') {\n        config.plugins.push(new IntLayerPlugin());\n      }\n\n      return config;\n    },\n  } satisfies Partial<NextConfig>);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwC;AACxC,oBAAoD;AACpD,qBAA+B;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,qBAAiB,gCAAiB;AAGxC,QAAM,UAAM,iCAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,uBAAmB,kBAAK,SAAS,kBAAkB;AACzD,QAAM,+BAA2B,sBAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,oCAAgC,qBAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,QAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,8BAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}

package/dist/esm/server/withIntlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n  nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n  if (typeof nextConfig !== 'object') nextConfig = {};\n\n  const intlayerConfig = getConfiguration();\n\n  // Set all configuration values as environment variables\n  const env = formatEnvVariable('next');\n\n  const { mainDir, baseDir } = intlayerConfig.content;\n  const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n  const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n  return Object.assign({}, nextConfig, {\n    env: { ...nextConfig.env, ...env },\n\n    serverExternalPackages: [\n      ...(nextConfig.serverExternalPackages ?? []),\n      'esbuild',\n      'module',\n      'fs',\n      'chokidar',\n      'fsevents',\n    ],\n\n    experimental: {\n      ...(nextConfig.experimental ?? {}),\n      // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n      turbo: {\n        ...(nextConfig.experimental?.turbo ?? {}),\n        resolveAlias: {\n          ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n          '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n        },\n\n        rules: {\n          '*.node': {\n            as: '*.node',\n            loaders: ['node-loader'],\n          },\n        },\n      },\n    },\n\n    webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n      if (nextConfig.webpack) {\n        // Invoke the existing webpack config if it exists\n        config = nextConfig.webpack(config, options);\n      }\n\n      config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n        relativeDictionariesPath\n      );\n\n      config.externals.push({\n        esbuild: 'esbuild',\n        module: 'module',\n        fs: 'fs',\n        chokidar: 'chokidar',\n        fsevents: 'fsevents',\n      });\n      config.module.rules.push({\n        test: /\\.node$/,\n        loader: 'node-loader',\n      });\n\n      const { isServer, nextRuntime } = options;\n\n      // Apply IntLayerPlugin only on the server-side\n      if (isServer && nextRuntime === 'nodejs') {\n        config.plugins.push(new IntLayerPlugin());\n      }\n\n      return config;\n    },\n  } satisfies Partial<NextConfig>);\n};\n"],"mappings":"AAAA,SAAS,SAAS,UAAU,YAAY;AACxC,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,sBAAsB;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,iBAAiB,iBAAiB;AAGxC,QAAM,MAAM,kBAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,QAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,gCAAgC,QAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,IAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,eAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}
+{"version":3,"sources":["../../../src/server/withIntlayer.ts"],"sourcesContent":["import { resolve, relative, join } from 'path';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { IntLayerPlugin } from '@intlayer/webpack';\nimport type { NextConfig } from 'next';\nimport type { NextJsWebpackConfig } from 'next/dist/server/config-shared';\n\ntype WebpackParams = Parameters<NextJsWebpackConfig>;\n\n/**\n * A Next.js plugin that adds the intlayer configuration to the webpack configuration\n * and sets the environment variables\n *\n * Usage:\n *\n * ```ts\n * // next.config.js\n * export default withIntlayer(nextConfig)\n * ```\n *\n */\nexport const withIntlayer = (\n  nextConfig: Partial<NextConfig> = {}\n): Partial<NextConfig> => {\n  if (typeof nextConfig !== 'object') nextConfig = {};\n\n  const intlayerConfig = getConfiguration();\n\n  // Format all configuration values as environment variables\n  const env = formatEnvVariable('next');\n\n  const { mainDir, baseDir } = intlayerConfig.content;\n  const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n  const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n  return Object.assign({}, nextConfig, {\n    env: { ...nextConfig.env, ...env },\n\n    serverExternalPackages: [\n      ...(nextConfig.serverExternalPackages ?? []),\n      'esbuild',\n      'module',\n      'fs',\n      'chokidar',\n      'fsevents',\n    ],\n\n    experimental: {\n      ...(nextConfig.experimental ?? {}),\n      // Using Intlayer with Turbopack is not supported as long external modules can't be resolved (such as esbuild or fs)\n      turbo: {\n        ...(nextConfig.experimental?.turbo ?? {}),\n        resolveAlias: {\n          ...(nextConfig.experimental?.turbo?.resolveAlias ?? {}),\n          '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n        },\n\n        rules: {\n          '*.node': {\n            as: '*.node',\n            loaders: ['node-loader'],\n          },\n        },\n      },\n    },\n\n    webpack: (config: WebpackParams['0'], options: WebpackParams[1]) => {\n      if (nextConfig.webpack) {\n        // Invoke the existing webpack config if it exists\n        config = nextConfig.webpack(config, options);\n      }\n\n      config.resolve.alias['@intlayer/dictionaries-entry'] = resolve(\n        relativeDictionariesPath\n      );\n\n      config.externals.push({\n        esbuild: 'esbuild',\n        module: 'module',\n        fs: 'fs',\n        chokidar: 'chokidar',\n        fsevents: 'fsevents',\n      });\n      config.module.rules.push({\n        test: /\\.node$/,\n        loader: 'node-loader',\n      });\n\n      const { isServer, nextRuntime } = options;\n\n      // Apply IntLayerPlugin only on the server-side\n      if (isServer && nextRuntime === 'nodejs') {\n        config.plugins.push(new IntLayerPlugin());\n      }\n\n      return config;\n    },\n  } satisfies Partial<NextConfig>);\n};\n"],"mappings":"AAAA,SAAS,SAAS,UAAU,YAAY;AACxC,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,sBAAsB;AAkBxB,MAAM,eAAe,CAC1B,aAAkC,CAAC,MACX;AACxB,MAAI,OAAO,eAAe,SAAU,cAAa,CAAC;AAElD,QAAM,iBAAiB,iBAAiB;AAGxC,QAAM,MAAM,kBAAkB,MAAM;AAEpC,QAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,QAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,QAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAEnE,SAAO,OAAO,OAAO,CAAC,GAAG,YAAY;AAAA,IACnC,KAAK,EAAE,GAAG,WAAW,KAAK,GAAG,IAAI;AAAA,IAEjC,wBAAwB;AAAA,MACtB,GAAI,WAAW,0BAA0B,CAAC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,GAAI,WAAW,gBAAgB,CAAC;AAAA;AAAA,MAEhC,OAAO;AAAA,QACL,GAAI,WAAW,cAAc,SAAS,CAAC;AAAA,QACvC,cAAc;AAAA,UACZ,GAAI,WAAW,cAAc,OAAO,gBAAgB,CAAC;AAAA,UACrD,gCAAgC,QAAQ,wBAAwB;AAAA,QAClE;AAAA,QAEA,OAAO;AAAA,UACL,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,SAAS,CAAC,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS,CAAC,QAA4B,YAA8B;AAClE,UAAI,WAAW,SAAS;AAEtB,iBAAS,WAAW,QAAQ,QAAQ,OAAO;AAAA,MAC7C;AAEA,aAAO,QAAQ,MAAM,8BAA8B,IAAI;AAAA,QACrD;AAAA,MACF;AAEA,aAAO,UAAU,KAAK;AAAA,QACpB,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,aAAO,OAAO,MAAM,KAAK;AAAA,QACvB,MAAM;AAAA,QACN,QAAQ;AAAA,MACV,CAAC;AAED,YAAM,EAAE,UAAU,YAAY,IAAI;AAGlC,UAAI,YAAY,gBAAgB,UAAU;AACxC,eAAO,QAAQ,KAAK,IAAI,eAAe,CAAC;AAAA,MAC1C;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAA+B;AACjC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-intlayer",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "private": false,
   "description": "Internationalisation tool for Next.js applications. Declare your multilingual contant in the same lever than your component. Powered by TypeScript, declaration files.",
   "keywords": [
@@ -72,12 +72,12 @@
   ],
   "dependencies": {
     "node-loader": "^2.1.0",
-    "@intlayer/chokidar": "4.0.0",
-    "@intlayer/config": "4.0.0",
-    "@intlayer/core": "4.0.0",
-    "@intlayer/dictionaries-entry": "4.0.0",
-    "@intlayer/webpack": "4.0.0",
-    "react-intlayer": "4.0.0"
+    "@intlayer/config": "4.0.2",
+    "@intlayer/core": "4.0.2",
+    "react-intlayer": "4.0.2",
+    "@intlayer/dictionaries-entry": "4.0.2",
+    "@intlayer/chokidar": "4.0.2",
+    "@intlayer/webpack": "4.0.2"
   },
   "devDependencies": {
     "@types/node": "^22.10.6",
@@ -91,20 +91,20 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "@utils/ts-config": "1.0.4",
+    "intlayer": "4.0.2",
     "@utils/ts-config-types": "1.0.4",
-    "@utils/tsup-config": "1.0.4",
-    "intlayer": "4.0.0",
-    "@utils/eslint-config": "1.0.4"
+    "@utils/eslint-config": "1.0.4",
+    "@utils/tsup-config": "1.0.4"
   },
   "peerDependencies": {
     "next": ">=14.0.0",
     "react": ">=16.0.0",
-    "@intlayer/core": "4.0.0",
-    "@intlayer/dictionaries-entry": "4.0.0",
-    "@intlayer/config": "4.0.0",
-    "@intlayer/webpack": "4.0.0",
-    "intlayer": "4.0.0",
-    "react-intlayer": "^4.0.0"
+    "@intlayer/config": "4.0.2",
+    "@intlayer/core": "4.0.2",
+    "@intlayer/dictionaries-entry": "4.0.2",
+    "@intlayer/webpack": "4.0.2",
+    "intlayer": "4.0.2",
+    "react-intlayer": "^4.0.2"
   },
   "engines": {
     "node": ">=14.18"