Next.js 16 - Setting Up next-intl + AI Pre-Translation

1. Start with next-intl

This guide uses Next.js 16.3+ and next-intl 4.14+. next-intl handles locale routing and formatting; i18nexus handles translation management and AI translation. You do not need a separate routing package.

Use Node.js 22.13+ or 24 LTS. Create an App Router project with TypeScript, the default @/* import alias, and no src directory to match these paths. Skip creation if you already have an app.

npx create-next-app@latest my-app
cd my-app
npm install next-intl@^4.14

If your app uses src, place app, i18n, and proxy.ts there. Keep messages at the project root and change its import below to ../../messages/${currentLocale}.json.

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 next-intl 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.
• 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. The key is what your code uses; the value is what your users read.

Expand

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

The dotted keys become a nested Home object in next-intl's JSON.

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 messages/en.json and its German equivalent. These are generated files: make future string changes in i18nexus and let the CLI sync them.

3. Configure routing and messages

Move your root layout and page into app/[locale]. There should be no app/layout.tsx above that layout. Move globals.css alongside it if you keep its relative import. Then add these small configuration files.

import {defineRouting} from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

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

import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';

export const {Link, usePathname, useRouter} = createNavigation(routing);

import {locale as routeLocale} from 'next/root-params';
import {notFound} from 'next/navigation';
import {hasLocale} from 'next-intl';
import {getRequestConfig} from 'next-intl/server';
import {routing} from './routing';

export default getRequestConfig(async ({locale}) => {
  const currentLocale = locale ?? await routeLocale();
  if (!hasLocale(routing.locales, currentLocale)) notFound();

  return {
    locale: currentLocale,
    messages: (await import(`@/messages/${currentLocale}.json`)).default
  };
});

import type {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';

const nextConfig: NextConfig = {};
const withNextIntl = createNextIntlPlugin();

export default withNextIntl(nextConfig);

Merge the plugin into your existing Next.js config if you already have options there. The proxy chooses a language and routes requests. The request configuration reads that locale from root params and loads the matching JSON. This removes the need for setRequestLocale in each page.

4. Render your translations

import type {ReactNode} from 'react';
import {NextIntlClientProvider} from 'next-intl';
import {getLocale} from 'next-intl/server';
import {routing} from '@/i18n/routing';

export function generateStaticParams() {
  return routing.locales.map(locale => ({locale}));
}

export default async function RootLayout({children}: {children: ReactNode}) {
  const locale = await getLocale();

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

The provider supplies translations to Client Components. Server Components use the same request configuration directly. generateStaticParams lets Next.js prerender both languages.

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

export default async function Home() {
  const t = await getTranslations('Home');

  return (
    <main>
      <h1>{t('welcome')}</h1>
      <p>{t('greeting', {name: 'Sam'})}</p>
      <LanguageSwitcher />
    </main>
  );
}

For translated text in a Client Component, use useTranslations from next-intl. For links between your pages, import Link from @/i18n/navigation so the current locale is preserved.

5. Let users change languages

'use client';

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

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

  return (
    <select
      aria-label="Language"
      value={locale}
      onChange={event => router.replace(
        pathname + window.location.search + window.location.hash,
        {locale: event.target.value}
      )}>
      <option value="en">English</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Visit /en and /de. The switcher keeps the current page, query string, and fragment. next-intl manages the locale cookie; an extra router.refresh() is unnecessary.

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 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-intl documentation has the details for larger apps.