Internationalization (i18n): App Router Routing

1// middleware.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const locales = ['en', 'es', 'fr', 'de'];
5const defaultLocale = 'en';
6
7function getLocale(request: NextRequest): string {
8  // 1. Check user cookie first
9  const cookieLocale = request.cookies.get('NEXT_LOCALE')?.value;
10  if (cookieLocale && locales.includes(cookieLocale)) return cookieLocale;
11
12  // 2. Parse Accept-Language header
13  const acceptLang = request.headers.get('accept-language') || '';
14  const preferred = acceptLang.split(',')[0].split('-')[0].toLowerCase();
15
16  return locales.includes(preferred) ? preferred : defaultLocale;
17}
18
19export function middleware(request: NextRequest) {
20  const { pathname } = request.nextUrl;
21
22  // Check if pathname already starts with a supported locale
23  const pathnameHasLocale = locales.some(
24    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
25  );
26
27  if (pathnameHasLocale) return NextResponse.next();
28
29  // Redirect to localized URL: /products -> /en/products
30  const locale = getLocale(request);
31  request.nextUrl.pathname = `/${locale}${pathname}`;
32  return NextResponse.redirect(request.nextUrl);
33}