Next.js 16: next-i18next with App Router (2026)

1. Install next-i18next

next-i18next includes App Router routing, server translation helpers, and a client provider. i18nexus adds AI translation and a shared place to manage your strings. No additional locale-routing package is needed.

Use Next.js 16.3+ and next-i18next 16.3+, with TypeScript and Node.js 22.13+ or 24 LTS. This example uses the default @/* alias and no src directory.

npx create-next-app@latest my-app
cd my-app
npm install next-i18next@^16.3 i18next@^26 react-i18next

2. Let i18nexus handle your translations

Write your copy once. i18nexus stores your source strings, AI translates them into your project languages, and gives your team a place to review the results. The CLI brings those translations into your app.

To create a new i18nexus project, run this from your app directory:

npx @i18nexus/cli@latest init

For this example, use these choices:

• Sign in or create an account in the browser opened by the CLI.
• Use i18next as your library. Installed libraries are detected automatically.
• For a new app, choose that you do not have translation JSON yet. Set English (en) as the base language and German (de) as an additional language.
• Use one namespace: common.
• Accept automatic sync in package.json. This installs the CLI locally and adds development and build sync scripts.

When setup finishes, add the project API key printed by the CLI to .env in the app root. Add .env to .gitignore:

I18NEXUS_API_KEY="your_project_api_key"

Add your first two strings

Open the dashboard link printed by the CLI and add these English strings in the common namespace. The key is what your code uses; the value is what your users read.

Expand

• welcome: Welcome to my app!
• greeting: Hello, {{name}}!

Save each string, then expand its row to see the translations. You can review and edit them in the same place as your source text.

Expand

Prefer working with an AI coding assistant? Choose MCP setup during init, then ask your assistant to create these same strings through i18nexus. The MCP guide explains that workflow. The dashboard remains available for you and your team.

Give AI translation a moment to finish, then download the generated JSON before adding the imports in the next step:

npx i18nexus pull

You should now have public/locales/en/common.json and its German equivalent. These are generated files: make future string changes in i18nexus and let the CLI sync them.

3. Set up locale routing

Move your root layout and pages into app/[lng]. There should be no app/layout.tsx above this layout. Keep or adjust your existing CSS import when moving files.

import type {I18nConfig} from 'next-i18next/proxy';

const i18nConfig: I18nConfig = {
  supportedLngs: ['en', 'de'],
  fallbackLng: 'en',
  ns: ['common'],
  defaultNS: 'common',
  persistCookie: false // The language switcher saves the preference.
};

export default i18nConfig;

import {createProxy} from 'next-i18next/proxy';
import i18nConfig from './i18n.config';

export const proxy = createProxy(i18nConfig);

export const config = {
  matcher: '/((?!api|_next|.*\\..*).*)'
};

The proxy directs visitors to /en or /de using their saved preference or browser language. The switcher below saves the cookie; persistCookie: false keeps the proxy from overwriting that choice during navigation. This setup prefixes English too.

4. Connect server and client translations

import {createServerI18next} from 'next-i18next/server';
import i18nConfig from './i18n.config';

export const {getT, getResources, generateI18nStaticParams} = createServerI18next({
  ...i18nConfig,
  reloadOnPrerender: process.env.NODE_ENV === 'development',
  resourceLoader: async (language, namespace) => {
    if (process.env.NODE_ENV === 'development') {
      const {readFile} = await import('node:fs/promises');
      const {join} = await import('node:path');
      const file = join(process.cwd(), 'public/locales', language, `${namespace}.json`);
      return JSON.parse(await readFile(file, 'utf8'));
    }
    return import(`./public/locales/${language}/${namespace}.json`);
  }
});

Import these bound helpers wherever you need server translations. Production imports bundle the JSON, including for serverless hosting. In development, reading the files on each render means CLI updates are visible after a refresh, without restarting Next.js.

import type {ReactNode} from 'react';
import {lng as routeLanguage} from 'next/root-params';
import {notFound} from 'next/navigation';
import {I18nProvider} from 'next-i18next/client';
import {getT, getResources, generateI18nStaticParams} from '@/i18n.server';
import i18nConfig from '@/i18n.config';

export function generateStaticParams() {
  return generateI18nStaticParams();
}

export default async function RootLayout({children}: {children: ReactNode}) {
  const language = await routeLanguage();
  if (!i18nConfig.supportedLngs.includes(language)) notFound();
  const {i18n} = await getT('common');

  return (
    <html lang={language}>
      <body>
        <I18nProvider language={language} resources={getResources(i18n)}>
          {children}
        </I18nProvider>
      </body>
    </html>
  );
}

next-i18next 16.3+ reads the matched root parameter on Next.js 16.3+. That lets nested Server Components call getT() without receiving the locale as a prop, and keeps these pages eligible for prerendering.

5. Render translations and switch languages

import {getT} from '@/i18n.server';
import Greeting from '@/components/Greeting';
import LanguageSwitcher from '@/components/LanguageSwitcher';

export default async function Home() {
  const {t} = await getT('common');
  return (
    <main>
      <h1>{t('welcome')}</h1>
      <Greeting />
      <LanguageSwitcher />
    </main>
  );
}

'use client';

import {useT} from 'next-i18next/client';

export default function Greeting() {
  const {t} = useT('common');
  return <p>{t('greeting', {name: 'Sam'})}</p>;
}

'use client';

import {usePathname, useRouter} from 'next/navigation';
import {useT} from 'next-i18next/client';

export default function LanguageSwitcher() {
  const {i18n} = useT('common');
  const pathname = usePathname();
  const router = useRouter();

  function changeLanguage(language: string) {
    document.cookie = `i18next=${language};path=/;max-age=31536000;SameSite=Lax`;
    const segments = pathname.split('/');
    segments[1] = language;
    router.push(segments.join('/') + window.location.search + window.location.hash);
  }

  return (
    <select aria-label="Language" value={i18n.language} onChange={e => changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Visit /en and /de to check the server heading and client greeting. For links to new pages, include the current prefix, such as /de/about.

Run npm run dev and try the language switcher. The welcome message and greeting should change together:

EnglishExpand

DeutschExpand

Keep translations in sync

The sync script added by the CLI runs i18nexus listen alongside your app. It pulls on startup and updates the generated JSON when strings or translations change in i18nexus. Refresh the page if your app still shows a cached translation.

For deployment, set I18NEXUS_API_KEY in your build environment and run npm run build. The CLI-added prebuild script pulls the latest JSON before compilation. Install dev dependencies in the build stage so the CLI is available. Updates to bundled translations require a new build.

Keep your app's supportedLngs and ns lists aligned with i18nexus as you add languages or namespaces.

Keep adding source strings in the dashboard or through the i18nexus MCP. Your team can review and refine the AI translations in the same project. next-i18next documentation has the details for larger apps.