@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/blog/en-GB/i18n_using_next-i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-01
-updatedAt: 2025-11-01
-title: How to internationalise your Next.js application using next-i18next
-description: Set up i18n with next-i18next -  best practices and SEO tips for multilingual Next.js apps, covering internationalisation, content organisation, and technical setup.
+updatedAt: 2026-05-31
+title: How to internationalise your Next.js application using next-i18next - Complete guide to translate Translate Next.js 16 with next-i18next — App Router Setup
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Next.js 16 website multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - next-i18next
   - i18next
@@ -80,6 +80,7 @@ Before we dive into the implementation, here are some practices you should follo
   title="Demo CodeSandbox - How to Internationalise your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > See [Application Template](https://github.com/aymericzip/next-i18next-template) on GitHub.
 
@@ -116,7 +117,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: React bindings for i18next that provide hooks like `useTranslation` for client components.
 - **i18next-resources-to-backend**: A plugin that enables dynamic loading of translation files, allowing you to load only the namespaces you need.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your supported locales, default locale, and helper functions for URL localisation. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Step 3: Centralise Translation Namespaces
+</Step>
+
+<Step number={3} title="Centralise Translation Namespaces">
 
 Create a single source of truth for every namespace your application exposes. Reusing this list keeps server, client, and tooling code in sync and unlocks strong typing for translation helpers.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Step 4: Strongly Type Translation Keys with TypeScript
+</Step>
+
+<Step number={4} title="Strongly Type Translation Keys with TypeScript">
 
 Augment `i18next` to point at your canonical language files (usually English). TypeScript then infers valid keys per namespace, so calls to `t()` are checked end-to-end.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Step 5: Set Up Server-Side i18n Initialisation
+</Step>
+
+<Step number={5} title="Set Up Server-Side i18n Initialisation">
 
 Create a server-side initialisation function that loads translations for server components. This function creates a separate i18next instance for server-side rendering, ensuring that translations are loaded before rendering.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Step 6: Create Client-Side i18n Provider
+</Step>
+
+<Step number={6} title="Create Client-Side i18n Provider">
 
 Create a client component provider that wraps your application with the i18next context. This provider receives pre-loaded translations from the server to prevent flash of untranslated content (FOUC) and avoid duplicate fetching.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Step 7: Define Dynamic Locale Routes
+</Step>
+
+<Step number={7} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Step 8: Create Your Translation Files
+</Step>
+
+<Step number={8} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
 
@@ -493,7 +510,9 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 9: Utilise Translations in Your Pages
+</Step>
+
+<Step number={9} title="Utilise Translations in Your Pages">
 
 Create a page component that initialises i18next on the server and passes translations to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 10: Use Translations in Client Components
+</Step>
+
+<Step number={10} title="Use Translations in Client Components">
 
 Client components can use the `useTranslation` hook to access translations. This hook provides access to the translation function and the i18n instance, allowing you to translate content and access locale information.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Step 11: Use Translations in Server Components
+</Step>
+
+<Step number={11} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Optional) Step 12: Change the language of your content
+<Step number={12} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content in Next.js, the recommended approach is to use locale-prefixed URLs and Next.js links. The example below reads the current locale from the route, removes it from the pathname, and renders one link per available locale.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 13: Build a localised Link component
+</Step>
+
+<Step number={13} title="Build a localised Link component" isOptional={true}>
 
 Reusing localised URLs across your app keeps navigation consistent and SEO-friendly. Wrap `next/link` in a small helper that prefixes internal routes with the active locale while leaving external URLs untouched.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Tip: Because `LocalizedLink` is a drop-in replacement, migrate gradually by swapping imports and letting the component handle locale-specific URLs.
 
-### (Optional) Step 14: Access the active locale inside Server Actions
+</Step>
+
+<Step number={14} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions often require the current locale for emails, logging, or third-party integrations. Combine the locale cookie set by your proxy with the `Accept-Language` header as a fallback.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Because the helper relies on Next.js cookies and headers, it works in Route Handlers, Server Actions, and other server-only contexts.
 
-### (Optional) Step 15: Internationalise Your Metadata
+</Step>
+
+<Step number={15} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Optional) Step 16: Internationalise Your Sitemap
+</Step>
+
+<Step number={16} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -935,7 +966,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 17: Internationalise Your robots.txt
+</Step>
+
+<Step number={17} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that correctly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
 
@@ -966,7 +999,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 18: Set Up Middleware for Locale Routing
+</Step>
+
+<Step number={18} title="Set Up Middleware for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. This enhances user experience by displaying content in their preferred language.
 
@@ -1055,7 +1090,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 19: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={19} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While i18next handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -1080,3 +1117,7 @@ Intlayer will allow you to:
   Intlayer offers a free visual editor to edit your content using a visual editor. Learn more about [visual editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/en-GB/i18n_using_next-intl.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-01
-updatedAt: 2025-11-01
-title: How to internationalise your Next.js application using next-intl
-description: Set up i18n with next-intl - best practices and SEO tips for multilingual Next.js apps, covering internationalisation, content organisation, and technical setup.
+updatedAt: 2026-05-31
+title: How to internationalise your Next.js application using next-intl - Complete guide to translate Translate Next.js 16 with next-intl — App Router Setup
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Next.js 16 website multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - next-intl
   - Internationalization
@@ -107,7 +107,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: The core internationalisation library for Next.js App Router that provides hooks, server functions, and client providers for managing translations.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file that defines your supported locales and sets up next-intl's request configuration. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -209,7 +213,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Step 3: Define Dynamic Locale Routes
+</Step>
+
+<Step number={3} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -297,7 +303,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 4: Create Your Translation Files
+</Step>
+
+<Step number={4} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
 
@@ -339,7 +347,9 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 5: Utilise Translations in Your Pages
+</Step>
+
+<Step number={5} title="Utilise Translations in Your Pages">
 
 Create a page component that loads translations on the server and passes them to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -390,7 +400,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 6: Use Translations in Client Components
+</Step>
+
+<Step number={6} title="Use Translations in Client Components">
 
 Client components can use the `useTranslations` and `useFormatter` hooks to access translations and formatting functions. These hooks read from the `NextIntlClientProvider` context.
 
@@ -426,7 +438,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Step 7: Use Translations in Server Components
+</Step>
+
+<Step number={7} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations and formatters via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -458,9 +472,9 @@ const ServerComponent = ({
 
 > In your page/layout, use `getTranslations` and `getFormatter` from `next-intl/server` to pre-compute translations and formatting, then pass them as props to server components.
 
----
+</Step>
 
-### (Optional) Step 8: Change the language of your content
+<Step number={8} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content with next-intl, render locale-aware links that point to the same pathname while switching locale. The provider rewrites URLs automatically, so you only have to target the current route.
 
@@ -532,7 +546,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 9: Use the localised Link component
+</Step>
+
+<Step number={9} title="Use the localised Link component" isOptional={true}>
 
 `next-intl` provides a subpackage `next-intl/navigation` that contains a localised link component that automatically applies the active locale. We have already extracted it for you in the `@/i18n` file, so you can use it like this:
 
@@ -542,7 +558,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Optional) Step 10: Access the active locale inside Server Actions
+</Step>
+
+<Step number={10} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions can read the current locale using `next-intl/server`. This is useful for sending localised emails or storing language preferences alongside submitted data.
 
@@ -565,7 +583,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` reads the locale set by the `next-intl` proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.
 
-### (Optional) Step 11: Internationalise Your Metadata
+</Step>
+
+<Step number={11} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -604,7 +624,9 @@ export async function generateMetadata({
 // ... Rest of the page code
 ```
 
-### (Optional) Step 12: Internationalise Your Sitemap
+</Step>
+
+<Step number={12} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -658,7 +680,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 13: Internationalise Your robots.txt
+</Step>
+
+<Step number={13} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
 
@@ -691,7 +715,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 14: Set Up Proxy for Locale Routing
+</Step>
+
+<Step number={14} title="Set Up Proxy for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. next-intl provides a convenient proxy function that handles this automatically.
 
@@ -711,7 +737,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 15: Set Up TypeScript Types for the Locale
+</Step>
+
+<Step number={15} title="Set Up TypeScript Types for the Locale" isOptional={true}>
 
 Setting up TypeScript will help you to get autocompletion and type safety for your keys.
 
@@ -737,7 +765,9 @@ declare module "next-intl" {
 
 This code will use Module Augmentation to add the locales and messages to the next-intl AppConfig type.
 
-### (Optional) Step 15: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={16} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -762,3 +792,7 @@ Intlayer will allow you to:
   Intlayer offers a free visual editor to edit your content using a visual editor. Learn more about [visually editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/en-GB/list_i18n_technologies/frameworks/angular.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Best Internationalization (i18n) Tools for Angular
-description: Discover top Angular i18n solutions to tackle translation challenges, boost SEO, and deliver a seamless global web experience.
+updatedAt: 2026-05-31
+title: Best Internationalization (i18n) Tools for Angular - Complete guide to translate Best Angular i18n Libraries 2026 — Compared by DX & Bundle
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Angular app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Angular
   - i18n

package/blog/en-GB/list_i18n_technologies/frameworks/react-native.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Best Internationalization (i18n) Tools for React Native
-description: Discover top React Native i18n solutions to tackle translation challenges, boost SEO, and deliver a seamless global web experience.
+updatedAt: 2026-05-31
+title: "Best Internationalization (i18n) Tools for React Native - Complete guide to translate React Native i18n 2026: Best Tools for Expo & TypeScript"
+description: Best solution for bundle size, SEO, performances & maintainability. Make your React Native mobile app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - React Native
   - i18n

package/blog/en-GB/list_i18n_technologies/frameworks/react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Best Internationalization (i18n) Tools for React
-description: Discover top React i18n solutions to tackle translation challenges, boost SEO, and deliver a seamless global web experience.
+updatedAt: 2026-05-31
+title: Best Internationalization (i18n) Tools for React - Complete guide to translate Best React i18n Libraries 2026 — Compared by DX & Bundle
+description: Best solution for bundle size, SEO, performances & maintainability. Make your React app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - React
   - i18n

package/blog/en-GB/list_i18n_technologies/frameworks/svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Best Internationalization (i18n) Tools for Svelte
-description: Discover top Svelte i18n solutions to tackle translation challenges, boost SEO, and deliver a seamless global web experience.
+updatedAt: 2026-05-31
+title: Best Internationalization (i18n) Tools for Svelte - Complete guide to translate Best Svelte i18n Libraries 2026 — Compared by DX & Bundle
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Svelte app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Svelte
   - i18n

package/blog/en-GB/list_i18n_technologies/frameworks/vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Best Internationalization (i18n) Tools for Vue
-description: Discover top Vue i18n solutions to tackle translation challenges, boost SEO, and deliver a seamless global web experience.
+updatedAt: 2026-05-31
+title: Best Internationalization (i18n) Tools for Vue - Complete guide to translate Best Vue i18n Libraries 2026 — Compared by DX & Bundle
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Vue app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Vue
   - i18n

package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-09-29
-title: next-i18next vs next-intl vs Intlayer
-description: Compare next-i18next with next-intl and Intlayer for the internationalisation (i18n) of a Next.js app
+updatedAt: 2026-05-31
+title: "next-i18next vs next-intl vs Intlayer - Complete guide to translate next-i18next vs next-intl vs Intlayer: 2026 Comparison"
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Next.js website multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - next-intl
   - next-i18next