@intlayer/docs 9.3.3 → 9.4.0

package/docs/en/packages/intlayer/getIntlayer.md

@@ -0,0 +1,196 @@
+---
+createdAt: 2026-08-23
+updatedAt: 2026-08-23
+title: getIntlayer Function Documentation | intlayer
+description: See how to use the getIntlayer function for intlayer package
+keywords:
+  - getIntlayer
+  - dictionary
+  - content
+  - selector
+  - Intlayer
+  - intlayer
+  - Internationalization
+  - Documentation
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getIntlayer
+history:
+  - version: 9.4.0
+    date: 2026-08-23
+    changes: "Initial documentation"
+author: aymericzip
+---
+
+# Documentation: `getIntlayer` Function in `intlayer`
+
+## Description
+
+The `getIntlayer` function picks one dictionary by its key and returns its content interpreted for a given locale. It is the framework-agnostic counterpart of the `useIntlayer` hook: same content, same selectors, but usable anywhere a React context is not available — Node scripts, server functions, route loaders, metadata builders, Express/Fastify handlers, tests.
+
+It reads the dictionaries generated by Intlayer in `.intlayer/`, so the `key` argument is typed and autocompleted from your own content declarations, and the returned object is fully typed down to each leaf.
+
+**Key Features:**
+
+- Typed dictionary keys and typed returned content
+- Interprets every content node (`t()`, `enu()`, `cond()`, `insert()`, `nest()`, `md()`, `html()`, `file()`, `gender()`)
+- Accepts a locale or a selector object (collections, variants)
+- Results are memoized per `key + locale + selector`
+- Falls back to a safe proxy in development when a dictionary is missing, instead of crashing
+
+---
+
+## Function Signature
+
+```typescript
+getIntlayer(
+  key: DictionaryKeys,                        // Required
+  localeOrSelector?: LocalesValues | DictionarySelector, // Optional
+  plugins?: Plugins[]                         // Optional
+): DeepTransformContent<...>
+```
+
+---
+
+## Parameters
+
+- `key: DictionaryKeys`
+  - **Description**: The key of the dictionary to read, as declared in your content files.
+  - **Type**: `DictionaryKeys` — a union of every declared dictionary key.
+  - **Required**: Yes
+
+- `localeOrSelector: LocalesValues | DictionarySelector`
+  - **Description**: The locale to interpret the content with, or a selector object for [dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md).
+    - `'fr'` — a locale
+    - `{ item: 2 }` — a [collection](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/collections.md) item (omit `item` to get every item as an array)
+    - `{ variant: 'black-friday' }` — a named [variant](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md) (omit for the `default` one)
+    - `{ variant: { id: 'prod_abc', userId: '123' } }` — a structured variant
+    - Any selector can carry a locale: `{ item: 2, locale: 'fr' }`
+  - **Type**: `LocalesValues | DictionarySelector`
+  - **Required**: No (Optional) — defaults to the configured `defaultLocale`.
+
+- `plugins: Plugins[]`
+  - **Description**: Custom node transformers replacing the base interpreter plugins. Advanced use only; omit it to keep the default behaviour.
+  - **Type**: `Plugins[]`
+  - **Required**: No (Optional)
+
+### Returns
+
+- **Type**: The interpreted content of the dictionary, typed from your declaration.
+- **Description**: A plain object mirroring the `content` field of your dictionary, where every Intlayer node has been resolved to its final value for the requested locale.
+
+---
+
+## Example Usage
+
+### Basic Usage
+
+```typescript fileName="src/app.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer("app", "fr"); // "Bonjour"
+```
+
+### Without a locale
+
+Omitting the locale interprets the content with the `defaultLocale` declared in your [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
+
+```typescript
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer("app"); // Interpreted with the default locale
+```
+
+### Inside a server handler
+
+```typescript fileName="src/routes/greeting.ts" codeFormat="typescript"
+import { getIntlayer, getLocale } from "intlayer";
+
+export const greetingHandler = async (request: Request) => {
+  const locale = await getLocale({
+    getHeader: (name) => request.headers.get(name) ?? undefined,
+  });
+
+  const { title } = getIntlayer("app", locale);
+
+  return Response.json({ title });
+};
+```
+
+### With a selector (collections and variants)
+
+```typescript
+import { getIntlayer } from "intlayer";
+
+// A single collection item
+const secondPost = getIntlayer("blog-post", { item: 2, locale: "fr" });
+
+// Every item of the collection, as an ordered array
+const allPosts = getIntlayer("blog-post", { locale: "fr" });
+
+// A named variant
+const banner = getIntlayer("banner", { variant: "black-friday", locale: "fr" });
+```
+
+---
+
+## Behaviour Notes
+
+### Caching
+
+Results are memoized in a module-level cache keyed by `key + locale + selector`. Calling `getIntlayer("app", "fr")` repeatedly interprets the dictionary once and returns the very same object afterwards.
+
+### Missing dictionaries
+
+In development, requesting a key that has no generated dictionary logs a warning once and returns a safe fallback proxy: reading `content.title` yields the string `"app.title"` instead of throwing. This keeps a page usable while the missing declaration is fixed. Run the Intlayer build (or the dev server) so the dictionary is generated.
+
+### Bundle size
+
+`getIntlayer` reads the merged dictionary, which holds **every** locale. In client bundles, the [build plugins](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md) rewrite the call so only the required content is shipped. When you read content outside of rendering (metadata, loaders, server functions) and want a single locale loaded on demand, use [`getIntlayerAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getIntlayerAsync.md) instead.
+
+---
+
+## Related Functions
+
+- [`getIntlayerAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getIntlayerAsync.md): Async counterpart loading a single locale chunk.
+- [`getDictionary`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getDictionary.md): Interprets a dictionary object you pass yourself, instead of one looked up by key.
+- [`useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md): The React hook equivalent, reading the locale from the provider.
+
+---
+
+## TypeScript
+
+```typescript
+function getIntlayer<
+  const T extends DictionaryKeys,
+  const A extends LocalesValues | DictionarySelector = DeclaredLocales,
+>(
+  key: T,
+  localeOrSelector?: A,
+  plugins?: Plugins[]
+): DeepTransformContent<
+  DictionaryRegistryResult<T, A>,
+  IInterpreterPluginState,
+  ExtractSelectorLocale<A>
+>;
+```

package/docs/en/packages/intlayer/getIntlayerAsync.md

@@ -0,0 +1,141 @@
+---
+createdAt: 2026-08-23
+updatedAt: 2026-08-23
+title: getIntlayerAsync Function Documentation | intlayer
+description: See how to use the getIntlayerAsync function for intlayer package
+keywords:
+  - getIntlayerAsync
+  - dictionary
+  - dynamic import
+  - metadata
+  - bundle optimization
+  - Intlayer
+  - intlayer
+  - Internationalization
+  - Documentation
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getIntlayerAsync
+history:
+  - version: 9.4.0
+    date: 2026-08-23
+    changes: "Initial documentation"
+author: aymericzip
+---
+
+# Documentation: `getIntlayerAsync` Function in `intlayer`
+
+## Description
+
+The `getIntlayerAsync` function picks one dictionary by its key and resolves its content for a given locale, **loading that locale alone**.
+
+It is the asynchronous counterpart of [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getIntlayer.md), meant for the places a dictionary is read outside of rendering — route `head` / metadata builders, loaders, server functions.
+
+Where `getIntlayer` pulls in the merged dictionary holding every locale, the [build plugins](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md) (`@intlayer/babel`, `@intlayer/swc`) rewrite this call into `getDictionaryAsync(loaderMap, key, locale)`, pointing it at the per-locale chunks in `.intlayer/dynamic_dictionaries/`. The bundle therefore only ever carries the locale actually requested.
+
+Without those plugins — an unoptimized build — the call resolves through the synchronous dictionary registry instead: the same content, without the per-locale split.
+
+**Key Features:**
+
+- Same typed keys, selectors and returned content as `getIntlayer`
+- Loads only the requested locale chunk in optimized builds
+- Concurrent calls for the same chunk share a single load
+- Safe to use in `async` metadata builders, loaders and server functions
+
+---
+
+## Function Signature
+
+```typescript
+getIntlayerAsync(
+  key: DictionaryKeys,                        // Required
+  localeOrSelector?: LocalesValues | DictionarySelector, // Optional
+  plugins?: Plugins[]                         // Optional
+): Promise<DeepTransformContent<...>>
+```
+
+---
+
+## Parameters
+
+- `key: DictionaryKeys`
+  - **Description**: The key of the dictionary to read, as declared in your content files.
+  - **Type**: `DictionaryKeys` — a union of every declared dictionary key.
+  - **Required**: Yes
+
+- `localeOrSelector: LocalesValues | DictionarySelector`
+  - **Description**: The locale to interpret the content with, or a selector object for [dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md).
+    - `'fr'` — a locale
+    - `{ item: 2 }` — a [collection](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/collections.md) item (omit `item` to get every item as an array)
+    - `{ variant: 'black-friday' }` — a named [variant](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md) (omit for the `default` one)
+    - `{ variant: { id: 'prod_abc', userId: '123' } }` — a structured variant
+    - Any selector can carry a locale: `{ item: 2, locale: 'fr' }`
+  - **Type**: `LocalesValues | DictionarySelector`
+  - **Required**: No (Optional) — defaults to the configured `defaultLocale`.
+
+- `plugins: Plugins[]`
+  - **Description**: Custom node transformers replacing the base interpreter plugins. Advanced use only.
+  - **Type**: `Plugins[]`
+  - **Required**: No (Optional)
+
+### Returns
+
+- **Type**: `Promise<Content>` — a promise resolving to the interpreted content of the dictionary, typed from your declaration.
+
+---
+
+## Example Usage
+
+### Basic Usage
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getIntlayerAsync } from "intlayer";
+
+const { title } = await getIntlayerAsync("app", "fr"); // "Bonjour"
+```
+
+---
+
+## `getIntlayer` vs `getIntlayerAsync`
+
+|                    | [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getIntlayer.md) | `getIntlayerAsync`                                |
+| ------------------ | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| Returns            | The content                                                                                                     | A promise of the content                          |
+| Dictionary loaded  | The merged dictionary (all locales)                                                                             | The chunk of the requested locale only            |
+| Best suited for    | Rendering, synchronous code paths                                                                               | Metadata, loaders, server functions               |
+| Requires a plugin? | No                                                                                                              | No — the per-locale split needs the build plugins |
+
+Both accept the same arguments and return the same content: switching from one to the other only changes **when** and **how much** is loaded.
+
+---
+
+## Related Functions
+
+- [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getIntlayer.md): Synchronous equivalent reading the merged dictionary.
+- [`getDictionaryAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getDictionaryAsync.md): The lower-level function the build plugins rewrite this call into.
+- [`getLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocale.md): Detects the locale of an incoming request.
+
+---
+
+## TypeScript
+
+```typescript
+function getIntlayerAsync<
+  const T extends DictionaryKeys,
+  const A extends LocalesValues | DictionarySelector = DeclaredLocales,
+>(
+  key: T,
+  localeOrSelector?: A,
+  plugins?: Plugins[]
+): Promise<
+  DeepTransformContent<
+    DictionaryRegistryResult<T, A>,
+    IInterpreterPluginState,
+    ExtractSelectorLocale<A>
+  >
+>;
+```

package/docs/en/packages/next-intlayer/exports.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-08-22
 title: next-intlayer Package Documentation
 description: Next.js-specific integration for Intlayer, providing middleware and providers for App Router and Page Router.
 keywords:
@@ -15,6 +15,9 @@ slugs:
   - next-intlayer
   - exports
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 10.0.0
     date: 2026-06-23
     changes: "Add usePathname utility"
@@ -75,15 +78,16 @@ or
 import "next-intlayer/server";
 ```
 
-| Component                | Description                                                                                                  | Related Doc |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |
-| `IntlayerClientProvider` | Provider for client-side components in Next.js App Router. Wraps `IntlayerProvider` from react-intlayer.     | -           |
-| `IntlayerServerProvider` | Provider for server-side components in Next.js (App Router). Provides locale context on the server.          | -           |
-| `IntlayerServer`         | Server-side wrapper for Intlayer content in App Router. Ensures proper locale handling in Server Components. | -           |
-| `HTMLProvider`           | Provider for HTML-related internationalization settings. Allows component overrides for HTML tags.           | -           |
-| `HTMLRenderer`           | Renders HTML content with custom components.                                                                 | -           |
-| `MarkdownProvider`       | Provider for markdown rendering context. Allows custom component overrides for markdown elements.            | -           |
-| `MarkdownRenderer`       | Renders markdown content with custom components.                                                             | -           |
+| Component                | Description                                                                                                                                                                    | Related Doc |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `IntlayerProvider`       | Unified provider for the Next.js App Router. Mounted once in the locale layout, it seeds the request-scoped server context _and_ mounts the client provider. (Intlayer >= 9.4) | -           |
+| `IntlayerClientProvider` | **Deprecated** — use `IntlayerProvider` from `next-intlayer/server`. Provider for client-side components in Next.js App Router. Wraps `IntlayerProvider` from react-intlayer.  | -           |
+| `IntlayerServerProvider` | **Deprecated** — use `IntlayerProvider` from `next-intlayer/server`. Provides locale context on the server. (Intlayer < 9.4)                                                   | -           |
+| `IntlayerServer`         | Server-side wrapper for Intlayer content in App Router. Ensures proper locale handling in Server Components.                                                                   | -           |
+| `HTMLProvider`           | Provider for HTML-related internationalization settings. Allows component overrides for HTML tags.                                                                             | -           |
+| `HTMLRenderer`           | Renders HTML content with custom components.                                                                                                                                   | -           |
+| `MarkdownProvider`       | Provider for markdown rendering context. Allows custom component overrides for markdown elements.                                                                              | -           |
+| `MarkdownRenderer`       | Renders markdown content with custom components.                                                                                                                               | -           |
 
 ### Hooks (Client-side)
 

package/docs/en/packages/next-intlayer/t.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-08-22
 title: t Function Documentation | next-intlayer
 description: See how to use the t function for next-intlayer package
 keywords:
@@ -19,6 +19,9 @@ slugs:
   - next-intlayer
   - t
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Init history"
@@ -154,25 +157,46 @@ const greeting = t(translations);
 
 ### Locale Detection and Context
 
-In `next-intlayer`, the current locale is managed through context providers: `IntlayerClientProvider` and `IntlayerServerProvider`. Ensure these providers wrap your components and the `locale` prop is correctly passed.
+In `next-intlayer`, the current locale is managed through context providers: `IntlayerClientProvider` and `IntlayerServerProvider` (or just `IntlayerProvider` for Intlayer >= 9.4). Ensure these providers wrap your components and the `locale` prop is correctly passed.
 
 #### Example:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
 ```tsx codeFormat={["typescript", "esm", "commonjs"]}
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const Page: FC<{ locale: Locales; children: ReactNode }> = ({
+  locale,
+  children,
+}) => <IntlayerProvider locale={locale}>{children}</IntlayerProvider>;
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
+import type { FC, ReactNode } from "react";
 import type { Locales } from "intlayer";
 import { IntlayerClientProvider } from "next-intlayer";
 import { IntlayerServerProvider } from "next-intlayer/server";
 
-const Page: FC<{ locale: Locales }> = ({ locale }) => (
+const Page: FC<{ locale: Locales; children: ReactNode }> = ({
+  locale,
+  children,
+}) => (
   <IntlayerServerProvider locale={locale}>
-    <IntlayerClientProvider locale={locale}>
-      {/* Your components here */}
-    </IntlayerClientProvider>
+    <IntlayerClientProvider locale={locale}>{children}</IntlayerClientProvider>
   </IntlayerServerProvider>
 );
 ```
 
+ </Tab>
+</Tabs>
+
 ---
 
 ## Common Errors and Troubleshooting
@@ -181,7 +205,7 @@ const Page: FC<{ locale: Locales }> = ({ locale }) => (
 
 - **Cause**: The current locale is not properly set, or the translation for the current locale is missing.
 - **Solution**:
-  - Verify that the `IntlayerClientProvider` or `IntlayerServerProvider` is correctly set up with the appropriate `locale`.
+  - Verify that the `IntlayerProvider` (or `IntlayerClientProvider`/`IntlayerServerProvider`) is correctly set up with the appropriate `locale`.
   - Ensure that your translations object includes all the necessary locales.
 
 ### Missing Translations in TypeScript
@@ -218,4 +242,4 @@ For more detailed usage and advanced features, refer to the [next-intlayer docum
 
 ---
 
-**Note**: Remember to set up your `IntlayerClientProvider` and `IntlayerServerProvider` properly to ensure that the current locale is correctly passed down to your components. This is crucial for the `t` function to return the correct translations.
+**Note**: Remember to set up your `IntlayerProvider` (or `IntlayerClientProvider` and `IntlayerServerProvider`) properly to ensure that the current locale is correctly passed down to your components. This is crucial for the `t` function to return the correct translations.

package/docs/en/packages/next-intlayer/useDictionary.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-08-22
 title: useDictionary Hook Documentation | next-intlayer
 description: See how to use the useDictionary hook for next-intlayer package
 keywords:
@@ -19,6 +19,9 @@ slugs:
   - next-intlayer
   - useDictionary
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Init history"
@@ -119,7 +122,7 @@ const ClientComponentExample: FC = () => {
 
 ## Example Usage in React Server Component
 
-If you're using the `useDictionary` hook outside the `IntlayerServerProvider`, the locale must be explicitly provided as a parameter when rendering the component:
+If you're using the `useDictionary` hook outside the `IntlayerProvider` (or `IntlayerServerProvider` for Intlayer < 9.4), the locale must be explicitly provided as a parameter when rendering the component:
 
 ```tsx fileName="ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";

package/docs/en/packages/next-intlayer/useIntlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
+updatedAt: 2026-08-22
 title: useIntlayer Hook Documentation | next-intlayer
 description: See how to use the useIntlayer hook for next-intlayer package
 keywords:
@@ -19,6 +19,9 @@ slugs:
   - next-intlayer
   - useIntlayer
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -79,6 +82,34 @@ Instructions for setting up content declaration files are available [here](https
 
 Here's how you can implement the `useIntlayer` hook within a Next.js page to dynamically load localized content based on the application's current locale:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type NextPageIntlayer } from "next-intlayer";
+import { useIntlayer } from "next-intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const HomePage: NextPageIntlayer = async ({ params }) => {
+  const { locale } = await params;
+
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <p>{content.introduction}</p>
+      <ClientComponentExample />
+      <ServerComponentExample />
+    </IntlayerProvider>
+  );
+};
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
 import { ClientComponentExample } from "@components/ClientComponentExample";
 import { ServerComponentExample } from "@components/ServerComponentExample";
@@ -104,6 +135,9 @@ const HomePage: NextPageIntlayer = async ({ params }) => {
 };
 ```
 
+ </Tab>
+</Tabs>
+
 ```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat={["typescript", "esm"]}
 "use-client";
 

package/docs/en/packages/react-intlayer/exports.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-08-22
 title: react-intlayer Package Documentation
 description: React-specific implementation of Intlayer, providing hooks and providers for React applications.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - react-intlayer
   - exports
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 10.0.0
     date: 2026-06-23
     changes: "Add usePathname utility"
@@ -137,13 +140,13 @@ Import:
 import "react-intlayer/server";
 ```
 
-| Export                   | Type        | Description                                      |
-| ------------------------ | ----------- | ------------------------------------------------ |
-| `IntlayerServerProvider` | `Component` | Provider for server-side rendering.              |
-| `IntlayerServer`         | `Component` | Server-side wrapper for Intlayer content.        |
-| `t`                      | `Function`  | Server-side version of the translation function. |
-| `useLocale`              | `Hook`      | Hook to access locale on the server side.        |
-| `useIntlayer`            | `Hook`      | Server-side version of `useIntlayer`.            |
-| `useDictionary`          | `Hook`      | Server-side version of `useDictionary`.          |
-| `useI18n`                | `Hook`      | Server-side version of `useI18n`.                |
-| `locale`                 | `Function`  | Function to get or set the locale on the server. |
+| Export                   | Type        | Description                                          |
+| ------------------------ | ----------- | ---------------------------------------------------- |
+| `IntlayerServerProvider` | `Component` | Provider for server-side rendering. (Intlayer < 9.4) |
+| `IntlayerServer`         | `Component` | Server-side wrapper for Intlayer content.            |
+| `t`                      | `Function`  | Server-side version of the translation function.     |
+| `useLocale`              | `Hook`      | Hook to access locale on the server side.            |
+| `useIntlayer`            | `Hook`      | Server-side version of `useIntlayer`.                |
+| `useDictionary`          | `Hook`      | Server-side version of `useDictionary`.              |
+| `useI18n`                | `Hook`      | Server-side version of `useI18n`.                    |
+| `locale`                 | `Function`  | Function to get or set the locale on the server.     |

package/docs/en/packages/react-intlayer/useI18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-08-22
 title: useI18n Hook Documentation | react-intlayer
 description: Learn how to use the useI18n hook in the react-intlayer package
 keywords:
@@ -20,6 +20,9 @@ slugs:
   - react-intlayer
   - useI18n
 history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
   - version: 6.0.0
     date: 2025-06-29
     changes: "Initial writing of `useI18n` hook documentation"
@@ -77,6 +80,34 @@ All dictionary keys must be declared within content declaration files to enhance
 
 Examples of using the `useI18n` hook within React components:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n } from "react-intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <ServerComponentExample />
+    </>
+  );
+};
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { ClientComponentExample, ServerComponentExample } from "@components";
@@ -101,6 +132,9 @@ const App: FC<{ locale: Locales }> = ({ locale }) => {
 };
 ```
 
+ </Tab>
+</Tabs>
+
 ```tsx fileName="src/components/ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useI18n } from "react-intlayer";