Middleware for locale redirects

A locale redirect lives in middleware.ts: read Accept-Language or a cookie and rewrite the URL towards /it or /en before the page renders. The middleware does not change the content, it changes the address.

The smallest file

// middleware.ts
import { NextResponse, type NextRequest } from "next/server";

const LOCALES = ["it", "en"] as const;

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const hasLocale = LOCALES.some(
    (l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`),
  );
  if (hasLocale) return NextResponse.next();

  const cookie = request.cookies.get("locale")?.value;
  const header = request.headers.get("accept-language") ?? "";
  const preferred =
    cookie && LOCALES.includes(cookie as "it" | "en")
      ? cookie
      : header.toLowerCase().startsWith("it")
        ? "it"
        : "en";

  const url = request.nextUrl.clone();
  url.pathname = `/${preferred}${pathname === "/" ? "" : pathname}`;
  const response = NextResponse.redirect(url, 307);
  response.headers.set("Vary", "Accept-Language, Cookie");
  return response;
}

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

Why the matcher matters

The middleware runs on every request it matches. If the pattern includes /_next or static files, every asset goes through the check and a redirect can hit an image. The pattern above excludes _next, API routes and anything with a dot in its name.

The loop, and how to avoid it

The loop starts when the redirect does not check whether the URL already carries a locale: /it lands on /it/it, then on /it/it/it. The hasLocale guard is the single line that prevents the disaster.

Save the cookie when the reader changes language in the switcher, with path=/ and a long max-age. The redirect then stops recomputing from the header on every visit.

Cache and runtime

• The redirect is an HTTP response: without Vary a CDN may serve it to everyone.
• The middleware runs on the edge by default: no database drivers it cannot run.
• An internal rewrite with NextResponse.rewrite keeps the URL clean and serves /it/... underneath.
• The middleware does not run with output: "export": a static site has no server to execute it.

The switcher needs a dropdown or a navigation component, mounted in a header block.

Hreflang mistakes are in hreflang, common errors; the canonical in canonicalisation; another middleware use case in middleware for authentication. Comparison: Remix vs Next.js.

curl -sI http://localhost:3000/

Known limitation: the middleware cannot see the page content and cannot read the database in a portable way. If the choice depends on the account, decide in the page, not in the middleware.