Server Side Locale

Middleware

Usage

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

const handleI18nRouting = createMiddleware(routing);
const response = handleI18nRouting(request);

Prefix-based routing

By default, prefix-based routing is used to determine the locale of a request. In this case, the locale is detected based on these priorities:

1. A locale prefix is present in the pathname (e.g. /en/about)
2. A cookie is present that contains a previously detected locale
3. A locale can be matched based on the accept-language header
4. As a last resort, the defaultLocale is used

To change the locale, users can visit a prefixed route. This will take precedence over a previously matched locale that is saved in a cookie or the accept-language header and will update a previous cookie value.

No locale

• 第一次请求
  • 浏览器（或内部导航）访问 /about。
  • handleI18nRouting(request) 检测到路径缺少语言前缀 → 立即返回 NextResponse.redirect('/en/about', 307)
  • 由于你在中间件里直接 return response，请求在这一层就结束了，浏览器收到 307 后自动跟随。
• 第二次请求
  • 浏览器紧接着向 /en/about 发起新请求。
  • 这条新请求再次经过同一个 middleware，但这次 request.nextUrl.pathname 已带 en：
    • handleI18nRouting 发现前缀齐全 → 返回 NextResponse.next()，页面才真正渲染。

Useful Hook

useLocale

import { useLocale } from "next-intl";
const locale = useLocale();

request.ts

src/i18n/request.ts - 在 “服务器端” 把“我该用哪种语言、加载哪份字典”告诉 next-intl