@intlayer/docs 6.1.4 → 6.1.5

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

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-09-25
+updatedAt: 2025-09-29
 title: next-i18next vs next-intl vs Intlayer
 description: Compare next-i18next with next-intl and Intlayer for the internationalization (i18n) of a Next.js app
 keywords:
@@ -47,12 +47,12 @@ We focus on **Next.js 13+ App Router** (with **React Server Components**) and ev
 
 ---
 
-| Library                | GitHub Stars                                                                                                                                                            | Total Commits                                                                                                                                                               | Last Commit                                                                                                                                  | First Version | NPM Version                                                                                                | NPM Downloads                                                                                                         |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `aymericzip/intlayer`  | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=flat&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers)   | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=flat&label=commits)](https://github.com/aymericzip/intlayer/commits)   | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=flat)](https://github.com/aymericzip/intlayer/commits)   | April 2024    | [![npm](https://img.shields.io/npm/v/intlayer?style=flat)](https://www.npmjs.com/package/intlayer)         | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=flat)](https://www.npmjs.com/package/intlayer)         |
-| `amannn/next-intl`     | [![GitHub Repo stars](https://img.shields.io/github/stars/amannn/next-intl?style=flat&label=%E2%AD%90%20stars)](https://github.com/amannn/next-intl/stargazers)         | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/amannn/next-intl?style=flat&label=commits)](https://github.com/amannn/next-intl/commits)         | [![Last Commit](https://img.shields.io/github/last-commit/amannn/next-intl?style=flat)](https://github.com/amannn/next-intl/commits)         | Nov 2020      | [![npm](https://img.shields.io/npm/v/next-intl?style=flat)](https://www.npmjs.com/package/next-intl)       | [![npm downloads](https://img.shields.io/npm/dm/next-intl?style=flat)](https://www.npmjs.com/package/next-intl)       |
-| `i18next/i18next`      | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/i18next?style=flat&label=%E2%AD%90%20stars)](https://github.com/i18next/i18next/stargazers)           | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=flat&label=commits)](https://github.com/i18next/i18next/commits)           | [![Last Commit](https://img.shields.io/github/last-commit/i18next/i18next?style=flat)](https://github.com/i18next/i18next/commits)           | Jan 2012      | [![npm](https://img.shields.io/npm/v/i18next?style=flat)](https://www.npmjs.com/package/i18next)           | [![npm downloads](https://img.shields.io/npm/dm/i18next?style=flat)](https://www.npmjs.com/package/i18next)           |
-| `i18next/next-i18next` | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/next-i18next?style=flat&label=%E2%AD%90%20stars)](https://github.com/i18next/next-i18next/stargazers) | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=flat&label=commits)](https://github.com/i18next/next-i18next/commits) | [![Last Commit](https://img.shields.io/github/last-commit/i18next/next-i18next?style=flat)](https://github.com/i18next/next-i18next/commits) | Nov 2018      | [![npm](https://img.shields.io/npm/v/next-i18next?style=flat)](https://www.npmjs.com/package/next-i18next) | [![npm downloads](https://img.shields.io/npm/dm/next-i18next?style=flat)](https://www.npmjs.com/package/next-i18next) |
+| Library                | GitHub Stars                                                                                                                                                                     | Total Commits                                                                                                                                                                        | Last Commit                                                                                                                                           | First Version | NPM Version                                                                                                         | NPM Downloads                                                                                                                  |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `aymericzip/intlayer`  | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers)   | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)   | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)   | April 2024    | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         |
+| `amannn/next-intl`     | [![GitHub Repo stars](https://img.shields.io/github/stars/amannn/next-intl?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/amannn/next-intl/stargazers)         | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/amannn/next-intl?style=for-the-badge&label=commits)](https://github.com/amannn/next-intl/commits)         | [![Last Commit](https://img.shields.io/github/last-commit/amannn/next-intl?style=for-the-badge)](https://github.com/amannn/next-intl/commits)         | Nov 2020      | [![npm](https://img.shields.io/npm/v/next-intl?style=for-the-badge)](https://www.npmjs.com/package/next-intl)       | [![npm downloads](https://img.shields.io/npm/dm/next-intl?style=for-the-badge)](https://www.npmjs.com/package/next-intl)       |
+| `i18next/i18next`      | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/i18next?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/i18next/i18next/stargazers)           | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=for-the-badge&label=commits)](https://github.com/i18next/i18next/commits)           | [![Last Commit](https://img.shields.io/github/last-commit/i18next/i18next?style=for-the-badge)](https://github.com/i18next/i18next/commits)           | Jan 2012      | [![npm](https://img.shields.io/npm/v/i18next?style=for-the-badge)](https://www.npmjs.com/package/i18next)           | [![npm downloads](https://img.shields.io/npm/dm/i18next?style=for-the-badge)](https://www.npmjs.com/package/i18next)           |
+| `i18next/next-i18next` | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/next-i18next?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/i18next/next-i18next/stargazers) | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/next-i18next/commits) | [![Last Commit](https://img.shields.io/github/last-commit/i18next/next-i18next?style=for-the-badge)](https://github.com/i18next/next-i18next/commits) | Nov 2018      | [![npm](https://img.shields.io/npm/v/next-i18next?style=for-the-badge)](https://www.npmjs.com/package/next-i18next) | [![npm downloads](https://img.shields.io/npm/dm/next-i18next?style=for-the-badge)](https://www.npmjs.com/package/next-i18next) |
 
 > Badges update automatically. Snapshots will vary over time.
 
@@ -140,6 +140,7 @@ Two important issues:
   > If I'm on the `/about` page, I don't want to load the content of the `/home` page
 
 - **Splitting by locale:**
+
   > If I'm on the `/fr/about` page, I don't want to load the content of the `/en/about` page
 
 Again, all three solutions are aware of these issues and allow managing these optimizations. The difference between the three solutions is the DX (Developer Experience).
@@ -170,6 +171,173 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 
 ---
 
+## TypeScript & safety
+
+<Columns>
+  <Column>
+
+**next-intl**
+
+- Solid TypeScript support, but **keys aren’t strictly typed by default**; you’ll maintain safety patterns manually.
+
+  </Column>
+  <Column>
+
+**next-i18next**
+
+- Base typings for hooks; **strict key typing requires extra tooling/config**.
+
+  </Column>
+  <Column>
+
+**intlayer**
+
+- **Generates strict types** from your content. **IDE autocompletion** and **compile-time errors** catch typos and missing keys before deploy.
+
+  </Column>
+</Columns>
+
+**Why it matters:** Strong typing shifts failures **left** (CI/build) instead of **right** (runtime).
+
+---
+
+## Missing translation handling
+
+<Columns>
+  <Column>
+
+**next-intl**
+
+- Relies on **runtime fallbacks** (e.g., show the key or default locale). Build doesn’t fail.
+
+  </Column>
+  <Column>
+
+**next-i18next**
+
+- Relies on **runtime fallbacks** (e.g., show the key or default locale). Build doesn’t fail.
+
+  </Column>
+  <Column>
+
+**intlayer**
+
+- **Build-time detection** with **warnings/errors** for missing locales or keys.
+
+  </Column>
+</Columns>
+
+**Why it matters:** Catching gaps during build prevents “mystery strings” in production and aligns with strict release gates.
+
+---
+
+## Routing, middleware & URL strategy
+
+<Columns>
+  <Column>
+
+**next-intl**
+
+- Works with **Next.js localized routing** on the App Router.
+
+  </Column>
+  <Column>
+
+**next-i18next**
+
+- Works with **Next.js localized routing** on the App Router.
+
+  </Column>
+  <Column>
+
+**intlayer**
+
+- All of the above, plus **i18n middleware** (locale detection via headers/cookies) and **helpers** to generate localized URLs and `<link rel="alternate" hreflang="…">` tags.
+
+  </Column>
+</Columns>
+
+**Why it matters:** Fewer custom glue layers; **consistent UX** and **clean SEO** across locales.
+
+---
+
+## Server Components (RSC) alignment
+
+<Columns>
+  <Column>
+
+**next-intl**
+
+- Supports Next.js 13+. Often requires passing t-functions/formatters through component trees in hybrid setups.
+
+  </Column>
+  <Column>
+
+**next-i18next**
+
+- Supports Next.js 13+. Similar constraints with passing translation utilities across boundaries.
+
+  </Column>
+  <Column>
+
+**intlayer**
+
+- Supports Next.js 13+ and smooths the **server/client boundary** with a consistent API and RSC-oriented providers, avoiding shuttling formatters or t-functions.
+
+  </Column>
+</Columns>
+
+**Why it matters:** Cleaner mental model and fewer edge cases in hybrid trees.
+
+---
+
+## DX, tooling & maintenance
+
+<Columns>
+  <Column>
+
+**next-intl**
+
+- Commonly paired with external localization platforms and editorial workflows.
+
+  </Column>
+  <Column>
+
+**next-i18next**
+
+- Commonly paired with external localization platforms and editorial workflows.
+
+  </Column>
+  <Column>
+
+**intlayer**
+
+- Ships a **free Visual Editor** and **optional CMS** (Git-friendly or externalized), plus a **VSCode extension** and **AI-assisted translations** using your own provider keys.
+
+  </Column>
+</Columns>
+
+**Why it matters:** Lowers ops cost and shortens the loop between developers and content authors.
+
+## Integration with localization platforms (TMS)
+
+Large organizations often rely on Translation Management Systems (TMS) like **Crowdin**, **Phrase**, **Lokalise**, **Localizely**, or **Localazy**.
+
+- **Why companies care**
+  - **Collaboration & roles**: Multiple actors are involved: developers, product managers, translators, reviewers, marketing teams.
+  - **Scale & efficiency**: continuous localization, in‑context review.
+
+- **next-intl / next-i18next**
+  - Typically use **centralized JSON catalogs**, so export/import with TMS is straightforward.
+  - Mature ecosystems and examples/integrations for the platforms above.
+
+- **Intlayer**
+  - Encourages **decentralized, per-component dictionaries** and supports **TypeScript/TSX/JS/JSON/MD** content.
+  - This improves modularity in code, but can make plug‑and‑play TMS integration harder when a tool expects centralized, flat JSON files.
+  - Intlayer provides alternatives: **AI‑assisted translations** (using your own provider keys), a **Visual Editor/CMS**, and **CLI/CI** workflows to catch and prefill gaps.
+
+> Note: `next-intl` and `i18next` also accepts TypeScript catalogs. If your team stores messages in `.ts` files or decentralizes them by feature, you can face similar TMS friction. However, many `next-intl` setups remain centralized in a `locales/` folder, which is a bit easier to refactor to JSON for TMS.
+
 ## Developer Experience
 
 This part makes a deep comparison between the three solutions. Rather than considering simple cases, as described in the 'getting started' documentation for each solution, we will consider a real use case, more similar to a real project.
@@ -206,7 +374,7 @@ The app structure is important to ensure good maintainability for your codebase.
 ```
 
   </TabItem>
-    <TabItem label="next-intl" value="next-intl">
+  <TabItem label="next-intl" value="next-intl">
 
 ```bash
 .
@@ -253,54 +421,8 @@ The app structure is important to ensure good maintainability for your codebase.
 
 #### Comparison
 
-##### Configuration
-
-Intlayer uses a centralized configuration file to set up your locale, middleware, build, etc.
-
-##### Content declaration
-
-The centralized type of architecture slows down the development process and makes the codebase more complex to maintain for several reasons:
-
-1. **For any new component created, you should:**
-   - Create the new resource/namespace in the `locales` folder
-   - Remember to import the new namespace in your page
-   - Translate your content (often done manually by copy/paste from AI providers)
-
-2. **For any change made on your components, you should:**
-   - Search for the related resource/namespace (far from the component)
-   - Translate your content
-   - Ensure your content is up to date for any locale
-   - Verify your namespace doesn't include unused keys/values
-   - Ensure the structure of your JSON files is the same for all locales
-
-On professional projects using these solutions, localization platforms are often used to help manage the translation of your content. However, this can quickly become costly for large projects.
-
-To solve this problem, Intlayer adopts an approach that scopes your content per-component and keeps your content close to your component, as we often do with CSS (`styled-components`), types, documentation (`storybook`), or unit tests (`jest`).
-
-This approach allows you to:
-
-1. **Increase the speed of development**
-   - `.content.{{ts|js|json}}` files can be created using a VSCode extension
-   - Autocompletion AI tools in your IDE (such as GitHub Copilot) can help you declare your content, reducing copy/paste
-
-2. **Clean your codebase**
-   - Reduce the complexity
-   - Increase the maintainability
-
-3. **Duplicate your components and their related content more easily (Example: login/register components, etc.)**
-   - By limiting the risk of impacting other components' content
-   - By copy/pasting your content from one application to another without external dependencies
-
-4. **Avoid polluting your codebase with unused keys/values for unused components**
-   - If you don't use a component, Intlayer will not import its related content
-   - If you delete a component, you'll more easily remember to remove its related content as it will be present in the same folder
-
-5. **Reduce reasoning cost for AI agents to declare your multilingual content**
-   - The AI agent won't have to scan your entire codebase to know where to implement your content
-   - Translations can easily be done by autocompletion AI tools in your IDE (such as GitHub Copilot)
-
-6. **Optimize loading performance**
-   - If a component is lazy-loaded, its related content will be loaded at the same time
+- **next-intl / next-i18next**: Centralized catalogs (JSON; namespaces/messages). Clear structure, integrates well with translation platforms, but can lead to more cross-file edits as apps grow.
+- **Intlayer**: Per-component `.content.{ts|js|json}` dictionaries co-located with components. Easier component reuse and local reasoning; adds files and relies on build-time tooling.
 
 #### Setup and Loading Content
 
@@ -335,7 +457,7 @@ import { I18nextProvider, initReactI18next } from "react-i18next";
 import { createInstance } from "i18next";
 import { ClientComponent, ServerComponent } from "@components";
 
-export default function HomePage() {
+export default function HomePage({ locale }: { locale: string }) {
   // Déclarez explicitement le namespace utilisé par ce composant
   const resources = await loadMessagesFor(locale); // your loader (JSON, etc.)
 
@@ -394,7 +516,7 @@ export default getRequestConfig(async ({ locale }) => {
 
 ```tsx fileName="src/app/[locale]/about/layout.tsx"
 import { NextIntlClientProvider } from "next-intl";
-import { getMessages } from "next-intl/server";
+import { getMessages, unstable_setRequestLocale } from "next-intl/server";
 import pick from "lodash/pick";
 
 export default async function LocaleLayout({
@@ -405,9 +527,13 @@ export default async function LocaleLayout({
   params: { locale: string };
 }) {
   const { locale } = params;
-  // Les messages sont chargés côté serveur via src/i18n/request.ts
-  // (voir docs next-intl). Ici on ne pousse au client qu'un sous-ensemble
-  // utile aux composants client (optimisation du payload).
+
+  // Set the active request locale for this server render (RSC)
+  unstable_setRequestLocale(locale);
+
+  // Messages are loaded server-side via src/i18n/request.ts
+  // (see next-intl docs). Here we only push a subset to the client
+  // that's needed for client components (payload optimization).
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
@@ -511,13 +637,13 @@ export default LandingPage;
 
 #### Comparison
 
-In comparison to other solutions, Intlayer uses plugins to optimize the import of content at build time.
+All three support per-locale content loading and providers.
 
-This means that the client context can be stored in the root layout, to reuse only one instance of the provider for all pages.
+- With **next-intl/next-i18next**, you typically load selected messages/namespaces per route and place providers where needed.
 
-In comparison, the other solutions require rebuilding a custom provider for each page.
+- With **Intlayer**, adds build-time analysis to infer usage, which can reduce manual wiring and may allow a single root provider.
 
-Intlayer also provides a Provider for your server components. We'll see why later.
+Choose between explicit control and automation based on team preference.
 
 ### Usage in a client component
 
@@ -554,7 +680,7 @@ Let's take an example of a client component rendering a counter.
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "next-i18next";
 
-export default function ClientComponentExample() {
+const ClientComponentExample = () => {
   const { t, i18n } = useTranslation("about");
   const [count, setCount] = useState(0);
 
@@ -572,7 +698,7 @@ export default function ClientComponentExample() {
       </button>
     </div>
   );
-}
+};
 ```
 
 > Don't forget to add "about" namespace on the page serverSideTranslations
@@ -609,7 +735,7 @@ export default function ClientComponentExample() {
 import React, { useState } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 
-export default function ClientComponentExample() {
+const ClientComponentExample = () => {
   // Scope directly to the nested object
   const t = useTranslations("about.counter");
   const format = useFormatter();
@@ -626,7 +752,7 @@ export default function ClientComponentExample() {
       </button>
     </div>
   );
-}
+};
 ```
 
 > Don't forget to add "about" message on the page client message
@@ -658,7 +784,7 @@ export default counterContent;
 import React, { useState } from "react";
 import { useNumber, useIntlayer } from "next-intlayer";
 
-export default function ClientComponentExample() {
+const ClientComponentExample = () => {
   const [count, setCount] = useState(0);
   const { label, increment } = useIntlayer("counter"); // returns strings
   const { number } = useNumber();
@@ -671,7 +797,7 @@ export default function ClientComponentExample() {
       </button>
     </div>
   );
-}
+};
 ```
 
   </TabItem>
@@ -702,62 +828,52 @@ We will take the case of a UI component. This component is a server component, a
   <TabItem label="next-i18next" value="next-i18next">
 
 ```tsx fileName="src/pages/about.tsx"
-import React from "react";
 import type { GetStaticProps } from "next";
 import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 type ServerComponentProps = {
   count: number;
-  t: (key: string) => string;
-  format: (value: number) => string;
 };
 
-export default function ServerComponent({
-  t,
-  format,
-  count,
-}: ServerComponentProps) {
+const ServerComponent = ({ count }: ServerComponentProps) => {
+  const { t, i18n } = useTranslation("about");
+  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+
   return (
     <div>
-      <p>{format(count)}</p>
+      <p>{formatted}</p>
       <button aria-label={t("counter.label")}>{t("counter.increment")}</button>
     </div>
   );
-}
+};
 ```
 
-> As the server component cannot be async, you need to pass the translations and formatter function as props.
->
-> - `const { t, i18n } = useTranslation("about");`
-> - `const formatted = new Intl.NumberFormat(i18n.language).format(initialCount);`
-
   </TabItem>
   <TabItem label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerComponent.tsx"
-import { getTranslations, getFormatter } from "next-intl/server";
-
-export default async function ServerComponent({
-  t,
-  format,
-  count,
-}: {
-  t: (key: string) => string;
-  format: (value: number) => string;
+type ServerComponentProps = {
   count: number;
-}) {
+  t: (key: string) => string;
+};
+
+const ServerComponent = ({ t, count }: ServerComponentProps) => {
+  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+
   return (
     <div>
-      <p>{format.number(count)}</p>
+      <p>{formatted}</p>
       <button aria-label={t("label")}>{t("increment")}</button>
     </div>
   );
-}
+};
 ```
 
 > As the server component cannot be async, you need to pass the translations and formatter function as props.
 >
+> In your page / layout:
+>
+> - `import { getTranslations, getFormatter } from "next-intl/server";`
 > - `const t = await getTranslations("about.counter");`
 > - `const format = await getFormatter();`
 
@@ -767,7 +883,11 @@ export default async function ServerComponent({
 ```tsx fileName="src/components/ServerComponent.tsx"
 import { useIntlayer, useNumber } from "next-intlayer/server";
 
-const ServerComponent = ({ count }: { count: number }) => {
+type ServerComponentProps = {
+  count: number;
+};
+
+const ServerComponent = ({ count }: ServerComponentProps) => {
   const { label, increment } = useIntlayer("counter");
   const { number } = useNumber();
 
@@ -909,7 +1029,7 @@ export default function robots(): MetadataRoute.Robots {
 ```tsx fileName="src/app/[locale]/about/layout.tsx"
 import type { Metadata } from "next";
 import { locales, defaultLocale } from "@/i18n";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations } from "next-intl/server";
 
 function localizedPath(locale: string, path: string) {
   return locale === defaultLocale ? path : "/" + locale + path;
@@ -1063,147 +1183,20 @@ export default robots;
 
 ---
 
-## TypeScript & safety
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Solid TypeScript support, but **keys aren’t strictly typed by default**; you’ll maintain safety patterns manually.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Base typings for hooks; **strict key typing requires extra tooling/config**.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- **Generates strict types** from your content. **IDE autocompletion** and **compile-time errors** catch typos and missing keys before deploy.
-
-  </Column>
-<Columns>
-
-**Why it matters:** Strong typing shifts failures **left** (CI/build) instead of **right** (runtime).
-
 ---
 
-## Missing translation handling
-
-**next-intl**
-
-- Relies on **runtime fallbacks** (e.g., show the key or default locale). Build doesn’t fail.
-
-**next-i18next**
-
-- Relies on **runtime fallbacks** (e.g., show the key or default locale). Build doesn’t fail.
-
-**intlayer**
-
-- **Build-time detection** with **warnings/errors** for missing locales or keys.
-
-**Why it matters:** Catching gaps during build prevents “mystery strings” in production and aligns with strict release gates.
-
----
-
-## Routing, middleware & URL strategy
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Works with **Next.js localized routing** on the App Router.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Works with **Next.js localized routing** on the App Router.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- All of the above, plus **i18n middleware** (locale detection via headers/cookies) and **helpers** to generate localized URLs and `<link rel="alternate" hreflang="…">` tags.
-
-  </Column>
-</Columns>
-
-**Why it matters:** Fewer custom glue layers; **consistent UX** and **clean SEO** across locales.
-
----
-
-## Server Components (RSC) alignment
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Supports Next.js 13+. Often requires passing t-functions/formatters through component trees in hybrid setups.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Supports Next.js 13+. Similar constraints with passing translation utilities across boundaries.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Supports Next.js 13+ and smooths the **server/client boundary** with a consistent API and RSC-oriented providers, avoiding shuttling formatters or t-functions.
-
-  </Column>
-</Columns>
-
-**Why it matters:** Cleaner mental model and fewer edge cases in hybrid trees.
-
----
+## And the winner is…
 
-## DX, tooling & maintenance
+It’s not simple. Each option has trade-offs. Here’s how I see it:
 
 <Columns>
   <Column>
 
-**next-intl**
-
-- Commonly paired with external localization platforms and editorial workflows.
-
-  </Column>
-  <Column>
-
 **next-i18next**
 
-- Commonly paired with external localization platforms and editorial workflows.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Ships a **free Visual Editor** and **optional CMS** (Git-friendly or externalized), plus a **VSCode extension** and **AI-assisted translations** using your own provider keys.
+- mature, full of features, lots of community plugins, but higher setup cost. If you need **i18next’s plugin ecosystem** (e.g., advanced ICU rules via plugins) and your team already knows i18next, accepting **more configuration** for flexibility.
 
   </Column>
-</Columns>
-
-**Why it matters:** Lowers ops cost and shortens the loop between developers and content authors.
-
-## And the winner is…
-
-It’s not simple. Each option has trade-offs. Here’s how I see it:
-
-<Columns>
   <Column>
 
 **next-intl**
@@ -1213,13 +1206,6 @@ It’s not simple. Each option has trade-offs. Here’s how I see it:
   </Column>
   <Column>
 
-**next-i18next**
-
-- mature, full of features, lots of community plugins, but higher setup cost. If you need **i18next’s plugin ecosystem** (e.g., advanced ICU rules via plugins) and your team already knows i18next, accepting **more configuration** for flexibility.
-
-  </Column>
-  <Column>
-
 **Intlayer**
 
 - built for modern Next.js, with modular content, type safety, tooling, and less boilerplate. If you value **component-scoped content**, **strict TypeScript**, **build-time guarantees**, **tree-shaking**, and **batteries-included** routing/SEO/editor tooling - especially for **Next.js App Router**, design-systems and **large, modular codebases**.
@@ -1233,8 +1219,6 @@ If you prefer minimal setup and accept some manual wiring, next-intl is a good p
 
 > **Future roadmap**: Intlayer also plans to develop plugins that work on top of **i18next** and **next-intl** solutions. This will give you the advantages of Intlayer for automation, syntax, and content management while keeping the security and stability provided by these established solutions in your application code.
 
----
-
 ## GitHub STARs
 
 GitHub stars are a strong indicator of a project's popularity, community trust, and long-term relevance. While not a direct measure of technical quality, they reflect how many developers find the project useful, follow its progress, and are likely to adopt it. For estimating the value of a project, stars help compare traction across alternatives and provide insights into ecosystem growth.