How do you implement internationalisation in NextJS using next-intl?

Question

Accepted Answer

next-intl is the recommended solution for internationalization (i18n) in Next.js App Router applications. It provides comprehensive i18n support including translations, date/number formatting, and internationalized routing. The library integrates seamlessly with both Server and Client Components and offers two main setup approaches: without i18n routing (simpler, single-language or user-specified locale) and with i18n routing (URL-based locale prefixes like /en/about). # 1. Install the package npm install next-intl # 2. Configure next.config.ts with the plugin import type { NextConfig } from 'next'; import createNextIntlPlugin from 'next-intl/plugin'; const withNextIntl = createNextIntlPlugin(); const nextConfig: NextConfig = {}; export default withNextIntl(nextConfig); This approach is ideal for single-language apps or when you want to determine locale based on user settings (like cookies) rather than URL prefixes. No middleware or [locale] folder is needed. ├── messages │ ├── en.json │ └── es.json ├── next.config.ts └── src ├── i18n.ts └── app ├── layout.tsx └── page.tsx // src/i18n.ts import { getRequestConfig } from 'next-intl/server'; export default getRequestConfig(async () => { // Static locale - replace with cookie or header detection as needed const locale = 'en'; return { locale, messages: (await import(`../messages/${locale}.json`)).default }; }); // src/app/layout.tsx import { NextIntlClientProvider } from 'next-intl'; import { getLocale, getMessages } from 'next-intl/server'; export default async function RootLayout({ children }: { children: React.ReactNode; }) { const locale = await getLocale(); const messages = await getMessages(); return ( {children} ); } { "HomePage": { "title": "Hello world!", "greeting": "Welcome back, {name}!" } } // src/app/page.tsx (Server Component) import { getTranslations } from 'next-intl/server'; export default async function HomePage() { const t = await getTranslations('HomePage'); return

{t('title')}

; } // Or with useTranslations in Client Component 'use client'; import { useTranslations } from 'next-intl'; export default function HomePage() { const t = useTranslations('HomePage'); return

{t('title', { name: 'John' })}

; } This approach adds locale prefixes to URLs (e.g., /en/about, /es/acerca) and is recommended for SEO and multi-language apps. It requires middleware, a [locale] dynamic folder, and routing configuration. ├── messages │ ├── en.json │ └── es.json ├── next.config.ts └── src ├── i18n │ ├── routing.ts │ └── request.ts ├── middleware.ts └── app └── [locale] ├── layout.tsx └── page.tsx import { defineRouting } from 'next-intl/routing'; import { createNavigation } from 'next-intl/navigation'; export const routing = defineRouting({ locales: ['en', 'es'], defaultLocale: 'en', localePrefix: 'always' // or 'as-needed' to remove prefix for default locale }); export const { Link, redirect, usePathname, useRouter } = createNavigation(routing); import { getRequestConfig } from 'next-intl/server'; import { routing } from './routing'; export default getRequestConfig(async ({ requestLocale }) => { let locale = await requestLocale; if (!locale || !routing.locales.includes(locale as any)) { locale = routing.defaultLocale; } return { locale, messages: (await import(`../../messages/${locale}.json`)).default }; }); import createMiddleware from 'next-intl/middleware'; import { routing } from './i18n/routing'; export default createMiddleware(routing); export const config = { matcher: ['/', '/(en|es)/:path*'] }; // src/app/[locale]/layout.tsx import { NextIntlClientProvider } from 'next-intl'; import { getMessages } from 'next-intl/server'; import { notFound } from 'next/navigation'; import { routing } from '@/i18n/routing'; export default async function LocaleLayout({ children, params }: { children: React.ReactNode; params: { locale: string }; }) { const { locale } = await params; if (!routing.locales.includes(locale as any)) { notFound(); } const messages = await getMessages(); return ( {children} ); } // src/app/[locale]/layout.tsx (add generateStaticParams) import { setRequestLocale } from 'next-intl/server'; import { routing } from '@/i18n/routing'; export function generateStaticParams() { return routing.locales.map((locale) => ({ locale })); } export default async function LocaleLayout({ children, params }) { const { locale } = await params; setRequestLocale(locale); // Must be called before using translations // .

How do you implement internationalisation in NextJS using next-intl?

Implement internationalization in Next.js using next-intl by installing the library, configuring the plugin, setting up request configuration, and optionally adding locale-based routing with middleware for URL prefixing.

Scenario Questions

Follow-up Questions