Next.js 15：如何修改NEXT_LOCALE Cookie使其支持跨子域名？

你遇到的新增Cookie而非修改的问题，核心是重写Cookie时未完全匹配原有Cookie的标识参数（名称、路径、domain），浏览器会把参数不一致的Cookie视为新的。

正确处理步骤 #

1. 从请求中读取原有的NEXT_LOCALE Cookie值
2. 清除原有子域名下的旧Cookie（避免新旧共存）
3. 重新设置带有父域名的NEXT_LOCALE Cookie，确保除domain外的其他属性和原有一致

具体代码实现（middleware.ts） #

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const nextLocale = request.cookies.get('NEXT_LOCALE')?.value;

  if (nextLocale) {
    // 清除原有子域名下的NEXT_LOCALE Cookie
    const currentHost = request.headers.get('host')?.replace(/^www\./, '');
    response.cookies.set({
      name: 'NEXT_LOCALE',
      value: '',
      path: '/',
      domain: currentHost,
      maxAge: -1, // 立即过期
    });

    // 设置跨子域名的Cookie，domain设为父域名（如.example.com）
    response.cookies.set({
      name: 'NEXT_LOCALE',
      value: nextLocale,
      path: '/',
      domain: '.example.com', // 替换为你的实际父域名，注意前缀的点
      maxAge: 60 * 60 * 24 * 30, // 有效期和原有Cookie保持一致
      sameSite: 'lax', // 匹配原有SameSite属性
      httpOnly: false, // NEXT_LOCALE默认非HttpOnly，按需调整
      secure: process.env.NODE_ENV === 'production', // 生产环境开启secure
    });
  }

  return response;
}

// 匹配需要处理的路由，按需调整
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

关键注意事项 #

• domain格式：必须使用父域名并添加前缀点（如.example.com），这样所有子域名（如a.example.com、b.example.com）都能读取该Cookie
• 属性一致性：SameSite、HttpOnly、secure、path这些参数必须和原NEXT_LOCALE Cookie完全一致，仅修改domain字段
• 先清后设：先清除原有子域名下的Cookie，避免同一名称的Cookie在浏览器中并存

内容的提问来源于stack exchange，提问作者Helcher