The core method of realizing internationalization in Next.js App Router is to combine the next-intl library for multi-language management. First, configure i18n routing support in next.config.js, define locales, defaultLocale and localeDetection; 2. After installing next-intl, create messages directory to store JSON files in each language, and automatically process language prefix routing through middleware.js using withI18nRouting; 3. Verify locale in app/layout.tsx and load corresponding language messages, and provide translation context using NextIntlClientProvider; 4. Call translated text in the component through useTranslations (client) or getTranslations (server); 5. Create a language switcher component, use useRouter and usePathname to replace the path prefix to achieve language switching, which can be used to persist user preferences with cookies; 6. Call getTranslations in generateMetadata to generate multilingual SEO meta tags; 7. For statically generated pages, use generateStaticParams to pre-generate paths for each language; 8. Use next-intl's useFormatter and getFormatter to achieve regional formatting such as dates and numbers; 9. It is recommended to split the translation files according to the functional module to improve maintenance and avoid the single file being too large. This solution fully supports SSR, RSC and Server Actions, and is currently the most stable and flexible Next.js internationalization practice.

Next.js' App Router has introduced native support for internationalization since v13, making the development of multilingual websites simpler and more structured. With built-in next-intl style integration (or using third-party libraries such as next-i18next ), you can easily achieve routing-level language switching, translation content management, and regionalized experience. Here are the core approaches and best practices for internationalization (i18n) using App Router.

? 1. Built-in i18n routing support with Next.js

Next.js natively supports multilingual routing based on path prefixes (such as /en/about , /zh/about ). You only need to configure the i18n field in next.config.js .

 // next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'zh', 'ja'],
    defaultLocale: 'en',
    localeDetection: true, // Automatically detect user language},
  // Other configurations...
};

export default nextConfig;

• locales : A list of supported languages.
• defaultLocale : default language.
• localeDetection : Whether to automatically redirect the user to its preferred language (based on Accept-Language header).

?? Note: Although this configuration is supported in App Router, it is recommended to combine next-intl or routing libraries to achieve more flexible control.

? 2. Use next-intl to achieve complete i18n (recommended method)

next-intl is the most popular i18n solution under App Router at present, and it is well compatible with React Server Components and Server Actions.

Step 1: Install dependencies

 npm install next-intl

Step 2: Create a language resource file

Create messages directory in the project:

 /messages
  en.json
  zh.json
  ja.json

Example: en.json

 {
  "welcome": "Welcome to our app!",
  "about.title": "About Us"
}

zh.json

 {
  "welcome": "Welcome to our app!",
  "about.title": "About Us"
}

Step 3: Configure Middleware

Create middleware.js (or .ts ) to read the language and set the request context:

 // middleware.js
import { withI18nRouting } from 'next-intl/middleware';

export default withI18nRouting({
  locales: ['en', 'zh', 'ja'],
  defaultLocale: 'en',
});

This will automatically process the routing mapping of /en/page and /zh/page , and support cookies or URL priority judgment languages.

Step 4: Load the message in the root layout

 // app/layout.tsx
import { notFound } from 'next/navigation';
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

type Props = {
  children: React.ReactNode;
  params: { locale: string };
};

export default async function RootLayout({
  children,
  params: { locale },
}: Props) {
  // Verify that locale is valid const isValidLocale = ['en', 'zh', 'ja'].includes(locale);
  if (!isValidLocale) notFound();

  // Load the message of the corresponding language const messages = await getMessages();

  Return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Step 5: Use translation in components

 'use client';

import { useTranslations } from 'next-intl';

export default function Welcome() {
  const t = useTranslations('common');
  return <h1>{t(&#39;welcome&#39;)}</h1>;
}

It can also be used in Server Component:

 import { getTranslations } from 'next-intl/server';

export default async function About() {
  const t = await getTranslations('about');
  return <h1>{t(&#39;title&#39;)}</h1>;
}

? 3. Dynamic language switching (language selector)

Create a language switch component:

 'use client';

import { useRouter, usePathname } from 'next/navigation';
import { useLocale } from 'next-intl';

export function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();
  const locale = useLocale();

  const switchTo = (newLocale: string) => {
    // Convert the current path from /en/pathname to /zh/pathname
    router.push(pathname.replace(`/${locale}`, `/${newLocale}`));
  };

  Return (
    <div>
      <button onClick={() => switchTo(&#39;en&#39;)}>English</button>
      <button onClick={() => switchTo(&#39;zh&#39;)}>Chinese</button>
      <button onClick={() => switchTo(&#39;ja&#39;)}>Japanese</button>
    </div>
  );
}

? Tip: You can also set persistence preferences through cookies().set('NEXT_LOCALE', 'zh') and read them in subsequent requests.

? 4. Multilingual support for SEO and meta tags

Use translation in generateMetadata :

 // app/about/page.tsx
import { getTranslations } from 'next-intl/server';

export async function generateMetadata({ params }: { params: { locale: string } }) {
  const t = await getTranslations({ locale: params.locale, namespace: 'about' });

  return {
    title: t('meta.title'),
    description: t('meta.description'),
  };
}

export default function About() {
  return <h1>About Page</h1>;
}

? 5. Advanced tips and precautions

• i18n in nested routes : Make sure that each layout.tsx receives params.locale and passes it down.

• Static Generation (SSG) and ISR : Use generateStaticParams to pre-generate pages for each language.

   export function generateStaticParams() {
    return ['en', 'zh', 'ja'].map((locale) => ({ locale }));
  }

• Date and number formatting : next-intl provides useFormatter() and server getFormatter() , supporting regionalized formats.

   const format = useFormatter();
  format.number(1000); // Display the millimeters according to locale

  ---

  Basically that's it. Next.js App Router next-intl combination is currently the most stable and flexible way to implement i18n. It not only supports SSR and RSC, but also facilitates maintenance of multilingual content. As long as the structure is clear, maintaining hundreds of translation fields is not complicated.

  ? Small suggestions: Split messages files by module (such as common.json , auth.json , product.json ) to avoid being too large in a single file.

  The above is the detailed content of Internationalization (i18n) in Next.js App Router. For more information, please follow other related articles on the PHP Chinese website!