How to internationalize your Next.js application using next-intl in 2026

Table of Contents

What is next-intl?

next-intl is a popular internationalization (i18n) library designed specifically for Next.js App Router. It provides a seamless way to build multilingual Next.js applications with excellent TypeScript support and built-in optimizations.

If you prefer, you can also refer to the next-i18next guide, or directly using Intlayer.

See the comparison in next-i18next vs next-intl vs Intlayer.

To understand where these libraries come from, read the history of JavaScript i18n.

What the benchmark says about next-intl on Next.js

Before implementing translations, understanding the performance profile of next-intl is essential. The i18n benchmark evaluates the same 10-page, 10-locale Next.js application across different setups and libraries to measure real bundle footprint, string leakage, and hydration overhead.

Key figures for next-intl on Next.js (gzip):

What to take away:

• Avoid global message catalogs: In standard setups where all messages are loaded in root layouts, ~89.8% of translated content sent to the browser belongs to other pages. Using pick(messages, ['namespace']) per route removes this leakage, though it requires manual maintenance.
• Runtime weight: The next-intl runtime adds ~14.7 KB gzip to each page. For existing next-intl apps, the @intlayer/next-intl compat adapter preserves the same hooks (useTranslations, useFormatter, etc.) while dropping runtime size to ~8.0 KB with 0% leak. Native next-intlayer further reduces footprint to 5.5 KB.

See the full data: Next.js benchmark report, and the benchmark repository.

Feature comparison on Next.js

How next-intl compares with next-i18next and Intlayer on the features a Next.js App Router project usually needs:

Runtime sizes come from the Next.js benchmark. For a detailed discussion, read next-i18next vs next-intl vs Intlayer.

Practices you should follow

Before we dive into the implementation, here are some practices you should follow:

• Set HTML lang and dir attributes In your layout, compute dir using getLocaleDirection(locale) and set <html lang={locale} dir={dir}> for proper accessibility and SEO.
• Split messages by namespace Organize JSON files per locale and namespace (e.g., common.json, about.json) to load only what you need.
• Minimize client payload On pages, send only required namespaces to NextIntlClientProvider (e.g., pick(messages, ['common', 'about'])).
• Prefer static pages Use static page as much as possible for better performance and SEO.
• I18n in server components Server components, like pages or all components not marked as client are statics and can be pre-rendered at build time. So we will have to pass the translation functions to them as props.
• Set up TypeScript types For your locales to ensure type safety throughout your application.
• Proxy for redirection Use a proxy to handle the locale detection and routing and redirect the user to the appropriate locale-prefixed URL.
• Internationalization of your metadata, sitemap, robots.txt Internationalize your metadata, sitemap, robots.txt using the generateMetadata function provided by Next.js to ensure a better discovery by search engines in all locales.
• Localize Links Localize Links using the Link component to redirect the user to the appropriate locale-prefixed URL. It's important to ensure the discovery of your pages in all locales.
• Automate tests and translations Automate tests and translations help loosing time to maintain your multilingual application.

See our doc listing everything you need to know about internationalization and SEO: Internationalization (i18n) with next-intl.

Step-by-Step Guide to Set Up next-intl in a Next.js Application

See Application Template on GitHub.

Here's the project structure we'll be creating:

.
├── global.ts
├── locales
│   ├── en
│   │  ├── common.json
│   │  └── about.json
│   ├── fr
│   │  ├── common.json
│   │  └── about.json
│   └── es
│      ├── common.json
│      └── about.json
└── src # Src is optional
    ├── proxy.ts
    ├── app
    │   ├── i18n.ts
    │   └── [locale]
    │       ├── layout.tsx
    │       ├── (home) # / (Route Group to not pollute all pages with home resources)
    │       │   ├── layout.tsx
    │       │   └── page.tsx
    │       └── about # /about
    │           ├── layout.tsx
    │           └── page.tsx
    └── components
        ├── ClientComponent.tsx
        └── ServerComponent.tsx

1. 1

   Install Dependencies

   Install the necessary packages using npm:

   bash

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   npm install next-intl
   

   • next-intl: The core internationalization library for Next.js App Router that provides hooks, server functions, and client providers for managing translations.
2. 2

   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.

   Centralizing your locale configuration prevents inconsistencies and makes it easier to add or remove locales in the future. The getRequestConfig function runs on every request and loads only the translations needed for each page, enabling code-splitting and reducing bundle size.

   src/i18n.ts

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   import { notFound } from "next/navigation";
   import createMiddleware from "next-intl/middleware";
   import { createNavigation } from "next-intl/navigation";
   
   // Define supported locales with type safety
   export const locales = ["en", "fr", "es"] as const;
   export type Locale = (typeof locales)[number];
   export const defaultLocale: Locale = "en";
   
   export function isRTL(locale: Locale | (string & {})) {
     return /^(ar|fa|he|iw|ur|ps|sd|ug|yi|ckb|ku)(-|$)/i.test(locale);
   }
   
   // Load messages dynamically per locale to enable code-splitting
   // Promise.all loads namespaces in parallel for better performance
   async function loadMessages(locale: Locale) {
     // Load only the namespaces your layout/pages need
     const [common, home, about] = await Promise.all([
       import(`../locales/${locale}/common.json`).then((m) => m.default),
       import(`../locales/${locale}/home.json`).then((m) => m.default),
       import(`../locales/${locale}/about.json`).then((m) => m.default),
       // ... Future JSON files should be added here
     ]);
   
     return { common, home, about } as const;
   }
   
   // Helper to generate localized URLs (e.g., /about vs /fr/about)
   export function localizedPath(locale: string, path: string) {
     return locale === defaultLocale ? path : `/${locale}${path}`;
   }
   
   // getRequestConfig runs on every request and provides messages to server components
   // This is where next-intl hooks into Next.js's server-side rendering
   export default async function getRequestConfig({
     requestLocale,
   }: {
     requestLocale: Promise<string | undefined>;
   }) {
     const requested: Locale = ((await requestLocale) as Locale) ?? defaultLocale;
   
     if (!locales.includes(requested)) notFound();
   
     return {
       locale: requested,
       messages: await loadMessages(requested),
     };
   }
   
   export function getCookie(locale: Locale) {
     return [
       `NEXT_LOCALE=${locale}`,
       "Path=/",
       `Max-Age=${60 * 60 * 24 * 365}`, // 1 year
       "SameSite=Lax",
     ].join("; ");
   }
   
   const routingOptions = {
     locales,
     defaultLocale,
     localePrefix: "as-needed", // Change /en/... route to /...
     // Optional: localized pathnames
     // pathnames: {
     //   '/': '/',
     //   '/about': {en: '/about', fr: '/a-propos', es: '/acerca-de'},
     //   '/blog/[slug]': '/blog/[slug]'
     // }
     //  localeDetection: true, // prevent "/" -> "/en" redirects from cookie
   } as const;
   
   export const { Link, redirect, usePathname, useRouter, getPathname } =
     createNavigation(routingOptions);
   
   export const proxy = createMiddleware(routingOptions);
   

3. 3

   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).

   Using dynamic routes enables Next.js to generate static pages for all locales at build time, improving performance and SEO. The layout component sets the HTML lang and dir attributes based on the locale, which is crucial for accessibility and search engine understanding.

   src/app/[locale]/layout.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   import type { ReactNode } from "react";
   import { locales } from "@/i18n";
   import { getLocaleDirection, setRequestLocale } from "next-intl/server";
   
   // Pre-generate static pages for all locales at build time (SSG)
   // This improves performance and SEO
   export function generateStaticParams() {
     return locales.map((locale) => ({ locale }));
   }
   
   export default function LocaleLayout({
     children,
     params,
   }: {
     children: ReactNode;
     params: Promise<{ locale: string }>;
   }) {
     // In Next.js App Router, params is a Promise (can be await'd)
     // This allows for dynamic route segments to be resolved asynchronously
     const { locale } = await params;
   
     // Critical: setRequestLocale tells next-intl which locale to use for this request
     // Without this, getTranslations() won't know which locale to use in server components
     setRequestLocale(locale);
   
     // Get text direction (LTR/RTL) for proper HTML rendering
     const dir = getLocaleDirection(locale);
   
     return (
       <html lang={locale} dir={dir}>
         <body>{children}</body>
       </html>
     );
   }
   

   src/app/[locale]/about/page.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   import { getTranslations, getMessages, getFormatter } from "next-intl/server";
   import { NextIntlClientProvider } from "next-intl";
   import pick from "lodash/pick";
   import ServerComponent from "@/components/ServerComponent";
   import ClientComponent from "@/components/ClientComponent";
   
   export default async function AboutPage({
     params,
   }: {
     params: Promise<{ locale: string }>;
   }) {
     const { locale } = await params;
   
     // Messages are loaded server-side. Push only what's needed to the client.
     // This minimizes the JavaScript bundle sent to the browser
     const messages = await getMessages();
     const clientMessages = pick(messages, ["common", "about"]);
   
     // Strictly server-side translations/formatting
     // These run on the server and can be passed as props to components
     const tAbout = await getTranslations("about");
     const tCounter = await getTranslations("about.counter");
     const format = await getFormatter();
   
     const initialFormattedCount = format.number(0);
   
     return (
       // NextIntlClientProvider makes translations available to client components
       // Only pass the namespaces your client components actually use
       <NextIntlClientProvider locale={locale} messages={clientMessages}>
         <main>
           <h1>{tAbout("title")}</h1>
           <ClientComponent />
           <ServerComponent
             formattedCount={initialFormattedCount}
             label={tCounter("label")}
             increment={tCounter("increment")}
           />
         </main>
       </NextIntlClientProvider>
     );
   }
   

4. 4

   Create Your Translation Files

   Create JSON files for each locale and namespace. This structure allows you to organize translations logically and load only what you need for each page.

   Organizing translations by namespace (e.g., common.json, about.json) enables code splitting and reduces bundle size. You only load the translations needed for each page, improving performance.

   EnglishFrench

   locales/en/common.json

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   {
     "welcome": "Welcome",
     "greeting": "Hello, world!"
   }
   

   locales/fr/common.json

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   {
     "welcome": "Bienvenue",
     "greeting": "Bonjour le monde!"
   }
   

   EnglishFrench

   locales/en/about.json

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   {
     "title": "About",
     "description": "About page description",
     "counter": {
       "label": "Counter",
       "increment": "Increment"
     }
   }
   

   locales/fr/about.json

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   {
     "title": "À propos",
     "description": "Description de la page À propos",
     "counter": {
       "label": "Compteur",
       "increment": "Incrémenter"
     }
   }
   

5. 5

   Utilize 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.

   Server-side loading of translations improves SEO and prevents FOUC (Flash of Untranslated Content). By using pick to send only required namespaces to the client provider, we minimize the JavaScript bundle sent to the browser.

   src/app/[locale]/about/page.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   import { getTranslations, getMessages, getFormatter } from "next-intl/server";
   import { NextIntlClientProvider } from "next-intl";
   import pick from "lodash/pick";
   import ServerComponent from "@/components/ServerComponent";
   import ClientComponent from "@/components/ClientComponent";
   
   export default async function AboutPage({
     params,
   }: {
     params: Promise<{ locale: string }>;
   }) {
     const { locale } = await params;
   
     // Messages are loaded server-side. Push only what's needed to the client.
     // This minimizes the JavaScript bundle sent to the browser
     const messages = await getMessages();
     const clientMessages = pick(messages, ["common", "about"]);
   
     // Strictly server-side translations/formatting
     // These run on the server and can be passed as props to components
     const tAbout = await getTranslations("about");
     const tCounter = await getTranslations("about.counter");
     const format = await getFormatter();
   
     const initialFormattedCount = format.number(0);
   
     return (
       // NextIntlClientProvider makes translations available to client components
       // Only pass the namespaces your client components actually use
       <NextIntlClientProvider locale={locale} messages={clientMessages}>
         <main>
           <h1>{tAbout("title")}</h1>
           <ClientComponent />
           <ServerComponent
             formattedCount={initialFormattedCount}
             label={tCounter("label")}
             increment={tCounter("increment")}
           />
         </main>
       </NextIntlClientProvider>
     );
   }
   

6. 6

   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.

   Client components need React hooks to access translations. The useTranslations and useFormatter hooks integrate seamlessly with next-intl and provide reactive updates when the locale changes.

   Don't forget to add the required namespaces to the page's client messages (only include the namespaces your client components actually need).

   src/components/ClientComponent.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   "use client";
   
   import React, { useState } from "react";
   import { useTranslations, useFormatter } from "next-intl";
   
   const ClientComponent = () => {
     // Scope directly to the nested object
     // useTranslations/useFormatter are hooks that read from NextIntlClientProvider context
     // They only work if the component is wrapped in NextIntlClientProvider
     const t = useTranslations("about.counter");
     const format = useFormatter();
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>{format.number(count)}</p>
         <button
           aria-label={t("label")}
           onClick={() => setCount((count) => count + 1)}
         >
           {t("increment")}
         </button>
       </div>
     );
   };
   

7. 7

   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.

   Server components that might be nested under client boundaries need to be synchronous. By passing translated strings and formatted values as props, we avoid async operations and ensure proper rendering. Pre-compute translations and formatting in the parent page component.

   src/components/ServerComponent.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   // Server components nested inside client components must be synchronous
   // React can't serialize async functions across the server/client boundary
   // Solution: pre-compute translations/formats in the parent and pass as props
   type ServerComponentProps = {
     formattedCount: string;
     label: string;
     increment: string;
   };
   
   const ServerComponent = ({
     formattedCount,
     label,
     increment,
   }: ServerComponentProps) => {
     return (
       <div>
         <p>{formattedCount}</p>
         <button aria-label={label}>{increment}</button>
       </div>
     );
   };
   

   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.

8. 8

   Change the language of your content

   אופציונלי

   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.

   src/components/LocaleSwitcher.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   "use client";
   
   import Link from "next/link";
   import { usePathname } from "next/navigation";
   import { useLocale } from "next-intl";
   import { defaultLocale, getCookie, type Locale, locales } from "@/i18n";
   
   const getLocaleLabel = (locale: Locale): string => {
     try {
       const displayNames = new Intl.DisplayNames([locale], { type: "language" });
       return displayNames.of(locale) ?? locale.toUpperCase();
     } catch {
       return locale.toUpperCase();
     }
   };
   
   const localeFlags: Record<Locale, string> = {
     en: "🇬🇧",
     fr: "🇫🇷",
     es: "🇪🇸",
   };
   
   export default function LocaleSwitcher() {
     const activeLocale = useLocale();
     const pathname = usePathname();
   
     // Remove the locale prefix from the pathname to get the base path
     const getBasePath = (path: string) => {
       for (const locale of locales) {
         if (path.startsWith(`/${locale}`)) {
           return path.slice(locale.length + 1) || "/";
         }
       }
       return path;
     };
   
     const basePath = getBasePath(pathname);
   
     return (
       <nav aria-label="Language selector">
         <div>
           {(locales as readonly Locale[]).map((locale) => {
             const isActive = locale === activeLocale;
             // Build the href based on whether it's the default locale
             const href =
               locale === defaultLocale ? basePath : `/${locale}${basePath}`;
             return (
               <Link
                 key={locale}
                 href={href}
                 aria-current={isActive ? "page" : undefined}
                 onClick={() => {
                   document.cookie = getCookie(locale);
                 }}
               >
                 <span>{localeFlags[locale]}</span>
                 <span>{getLocaleLabel(locale)}</span>
                 <span>{locale.toUpperCase()}</span>
               </Link>
             );
           })}
         </div>
       </nav>
     );
   }
   

9. 9

   Use the localized Link component

   אופציונלי

   next-intl provides a subpackage next-intl/navigation that contains a localized link component that automatically applies the active locale. We already extracted it for you in the @/i18n file, so you can use it like this:

   src/components/MyComponent.tsx

   העתקת התוכן

   העתקת קוד

   העתקת הקוד ללוח

   import { Link } from "@/i18n";
   
   return <Link href="/about">t("about.title")</Link>;
   

10. 10

    Access the active locale inside Server Actions

    אופציונלי

    Server Actions can read the current locale using next-intl/server. This is useful for sending localized emails or storing language preferences alongside submitted data.

    src/app/actions/get-current-locale.ts

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    "use server";
    
    import { getLocale } from "next-intl/server";
    
    export async function getCurrentLocale() {
      return getLocale();
    }
    
    export async function handleContactForm(formData: FormData) {
      const locale = await getCurrentLocale();
    
      // Use the locale to select templates, analytics labels, etc.
      console.log(`Received contact form from locale ${locale}`);
    }
    

    getLocale reads the locale set by next-intl proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.

11. 11

    Internationalize Your Metadata

    אופציונלי

    Translating content is important, but the main goal of internationalization is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.

    Properly internationalized metadata helps search engines understand what languages are available on your pages. This includes setting hreflang meta tags, translating titles and descriptions, and ensuring canonical URLs are correctly set for each locale.

    src/app/[locale]/about/layout.tsx

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    import type { Metadata } from "next";
    import { locales, defaultLocale, localizedPath } from "@/i18n";
    import { getTranslations } from "next-intl/server";
    
    // generateMetadata runs for each locale, generating SEO-friendly metadata
    // This helps search engines understand alternate language versions
    export async function generateMetadata({
      params,
    }: {
      params: { locale: string };
    }): Promise<Metadata> {
      const { locale } = params;
      const t = await getTranslations({ locale, namespace: "about" });
    
      const url = "/about";
      const languages = Object.fromEntries(
        locales.map((locale) => [locale, localizedPath(locale, url)])
      );
    
      return {
        title: t("title"),
        description: t("description"),
        alternates: {
          canonical: localizedPath(locale, url),
          languages: { ...languages, "x-default": url },
        },
      };
    }
    
    // ... Rest of the page code
    

12. 12

    Internationalize Your Sitemap

    אופציונלי

    Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.

    A properly internationalized sitemap ensures search engines can find and index all language versions of your pages. This improves visibility in international search results.

    src/app/sitemap.ts

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    import type { MetadataRoute } from "next";
    import { defaultLocale, locales } from "@/i18n";
    
    const origin = "https://example.com";
    
    const formatterLocalizedPath = (locale: string, path: string) =>
      locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;
    
    /**
     * Get a map of all locales and their localized paths
     *
     * Example output:
     * {
     *   "en": "https://example.com",
     *   "fr": "https://example.com/fr",
     *   "es": "https://example.com/es",
     *   "x-default": "https://example.com"
     * }
     */
    const getLocalizedMap = (path: string) =>
      Object.fromEntries([
        ...locales.map((locale) => [locale, formatterLocalizedPath(locale, path)]),
        ["x-default", formatterLocalizedPath(defaultLocale, path)],
      ]);
    
    // Generate sitemap with all locale variants for better SEO
    // The alternates field tells search engines about language versions
    export default function sitemap(): MetadataRoute.Sitemap {
      return [
        {
          url: formatterLocalizedPath(defaultLocale, "/"),
          lastModified: new Date(),
          changeFrequency: "monthly",
          priority: 1.0,
          alternates: { languages: getLocalizedMap("/") },
        },
        {
          url: formatterLocalizedPath(defaultLocale, "/about"),
          lastModified: new Date(),
          changeFrequency: "monthly",
          priority: 0.7,
          alternates: { languages: getLocalizedMap("/about") },
        },
      ];
    }
    

13. 13

    Internationalize Your robots.txt

    אופציונלי

    Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines don't index admin or dashboard pages in any language.

    Properly configuring robots.txt for all locales prevents search engines from indexing sensitive pages when your routes are different for each locale.

    src/app/robots.ts

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    import type { MetadataRoute } from "next";
    import { locales, defaultLocale } from "@/i18n";
    
    const origin = "https://example.com";
    // Generate paths for all locales (e.g., /admin, /fr/admin, /es/admin)
    const withAllLocales = (path: string) => [
      path,
      ...locales
        .filter((locale) => locale !== defaultLocale)
        .map((locale) => "/" + locale + path),
    ];
    
    export default function robots(): MetadataRoute.Robots {
      const disallow = [
        ...withAllLocales("/dashboard"),
        ...withAllLocales("/admin"),
      ];
    
      return {
        rules: { userAgent: "*", allow: ["/"], disallow },
        host: origin,
        sitemap: origin + "/sitemap.xml",
      };
    }
    

14. 14

    Set Up Proxy for Locale Routing

    אופציונלי

    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.

    Proxy ensures that users are automatically redirected to their preferred language when they visit your site. It also saves the user's preference for future visits, improving user experience.

    src/proxy.ts

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    import { proxy } from "@/i18n";
    
    // Middleware runs before routes, handling locale detection and routing
    // localeDetection: true uses Accept-Language header to auto-detect locale
    export default proxy;
    
    export const config = {
      // Skip API, Next internals and static assets
      // Regex: match all routes except those starting with api, _next, or containing a dot (files)
      matcher: ["/((?!api|_next|.*\\..*).*)"],
    };
    

15. 15

    Set Up TypeScript Types for the Locale

    אופציונלי

    Setting up TypeScript will help you to get autocompletion and type safety for your keys.

    For that, you can create a global.ts file in your project root and add the following code:

    global.ts

    העתקת התוכן

    העתקת קוד

    העתקת הקוד ללוח

    import type { locales } from "@/i18n";
    
    type Messages = {
      common: typeof import("./locales/en/common.json");
      home: typeof import("./locales/en/home.json");
      about: typeof import("./locales/en/about.json");
      // ... Future JSON files should be added here too
    };
    
    declare module "next-intl" {
      interface AppConfig {
        Locale: (typeof locales)[number];
        Messages: Messages;
      }
    }
    

    This code will use Module Augmentation to add the locales and messages to the next-intl AppConfig type.

16. 16

    Automate Your Translations Using Intlayer

    אופציונלי

    Intlayer is a free and open-source library designed to assist the localization process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.

    Managing translations manually can be time-consuming and error-prone. Intlayer automates translation testing, generation, and management, saving you time and ensuring consistency across your application.

    Intlayer will allows your to:

    • Declare your content where you want in your codebase Intlayer allows to declare your content where you want in your codebase using .content.{ts|js|json} files. It will allow a better organization of your content, ensuring better readability and maintainability of your codebase.

    • Test missing translations Intlayer provide test functions to that can be integrated in your CI/CD pipeline, or in your unit tests. Learn more about testing your translations.

    • Automate your translations, Intlayer provide a CLI and a VSCode extension to automate your translations. It can be integrated in your CI/CD pipeline. Learn more about automating your translations. You can use your own API key, and the AI provider of your choice. It also provide context aware translations, see fill content.

    • Connect external content Intlayer allows you to connect your content to an external content management system (CMS). To fetch it in a optimized way and insert it in your JSON resources. Learn more about fetching external content.

    • Visual editor Intlayer offers an free visual editor to edit your content using a visual editor. Learn more about visual editing your translations.

    And more. To discover all the features provided by Intlayer, please refer to the Interest of Intlayer documentation.

    Interest of Intlayer documentation

    For detailed performance benchmarks and comparisons, see:

    Next.js Benchmark Report

    i18n Benchmark Suite

    next-intl vs @intlayer/next-intl

    @intlayer/next-intl Compat Adapter