第 31 讲：国际化、rewrites、basePath 与 Proxy

const calculateRoutes = () => {
  return [
    { match: () => ({}), name: 'middleware_next_data' },
    ...(opts.minimalMode ? [] : fsChecker.headers),
    ...(opts.minimalMode ? [] : fsChecker.redirects),
    { match: () => ({}), name: 'middleware' },
    ...(opts.minimalMode ? [] : fsChecker.rewrites.beforeFiles),
    { match: () => ({}), name: 'before_files_end' },
    { match: () => ({}), name: 'check_fs' },
    ...(opts.minimalMode ? [] : fsChecker.rewrites.afterFiles),
    {
      check: true,
      match: () => ({}),
      name: 'after files check: true',
    },
    ...(opts.minimalMode ? [] : fsChecker.rewrites.fallback),
  ]
}

┌──────────────────────────┐
│ 1. middleware_next_data  │  RSC _next/data 路径预处理
├──────────────────────────┤
│ 2. headers               │  匹配则在 response 加 header
├──────────────────────────┤
│ 3. redirects             │  匹配则 302/308，结束
├──────────────────────────┤
│ 4. middleware            │  跑 middleware.ts，可改 URL/resp
├──────────────────────────┤
│ 5. rewrites.beforeFiles  │  在 fs 检查之前 rewrite，覆盖 page
├──────────────────────────┤
│ 6. check_fs              │  匹配 .next/server/app/ 里的 page
├──────────────────────────┤
│ 7. rewrites.afterFiles   │  page 没匹配上才 rewrite
├──────────────────────────┤
│ 8. rewrites.fallback     │  afterFiles 都没匹配上才 rewrite
└──────────────────────────┘

module.exports = {
  async rewrites() {
    return {
      // 1. beforeFiles：在 fs 检查之前 rewrite，可以覆盖已存在的 page
      beforeFiles: [
        { source: "/about", destination: "/maintenance" },
        // /api/v2/:path* 走外部服务
        {
          source: "/api/v2/:path*",
          destination: "https://api.example.com/:path*",
        },
      ],

      // 2. afterFiles：page 没匹配上才 rewrite
      afterFiles: [{ source: "/blog/:slug", destination: "/posts/:slug" }],

      // 3. fallback：所有都没匹配上才 rewrite（兜底）
      fallback: [
        { source: "/:path*", destination: "https://legacy.example.com/:path*" },
      ],
    };
  },
};

if (config.i18n) {
  const hasBasePath = pathHasPrefix(normalizedPath, config.basePath)
  if (config.basePath && pathHasPrefix(normalizedPath, config.basePath)) {
    normalizedPath = removePathPrefix(normalizedPath, config.basePath)
  }

  const localePathResult = normalizeLocalePath(normalizedPath, config.i18n.locales)
  const domainLocale = detectDomainLocale(
    config.i18n.domains,
    req.headers.host?.split(':')[0]
  )
  defaultLocale = domainLocale?.defaultLocale || config.i18n.defaultLocale
}

module.exports = {
  i18n: {
    locales: ["zh-CN", "en-US", "ja-JP"],
    defaultLocale: "zh-CN",
    localeDetection: true, // 根据 Accept-Language 自动检测
    domains: [
      { domain: "example.cn", defaultLocale: "zh-CN" },
      { domain: "example.com", defaultLocale: "en-US" },
    ],
  },
};

请求 example.com/products/iphone
  ↓ basePath strip（如果有）
请求 /products/iphone
  ↓ normalizeLocalePath
{ pathname: '/products/iphone', detectedLocale: undefined }
  ↓ detectDomainLocale → domain=example.com → defaultLocale=en-US
最终 locale = 'en-US', pathname = '/products/iphone'
  ↓ 渲染 page，注入 router.locale = 'en-US'

请求 /zh-CN/products/iphone
  ↓ normalizeLocalePath
{ pathname: '/products/iphone', detectedLocale: 'zh-CN' }

app/
  [lang]/
    layout.tsx     ← 读 params.lang，注入 locale context
    page.tsx
    products/[slug]/page.tsx
middleware.ts      ← 检测 Accept-Language，rewrite 到对应 lang

import { NextRequest, NextResponse } from "next/server";

const locales = ["zh-CN", "en-US"];
const defaultLocale = "zh-CN";

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  const hasLocale = locales.some(
    (l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}`,
  );

  if (hasLocale) return;

  // 从 Accept-Language 检测
  const acceptLang = request.headers.get("accept-language") ?? "";
  const detected = locales.find((l) => acceptLang.startsWith(l.split("-")[0]));
  const locale = detected ?? defaultLocale;

  // rewrite 而非 redirect，URL 不变
  return NextResponse.rewrite(new URL(`/${locale}${pathname}`, request.url));
}

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

module.exports = {
  basePath: "/blog", // 整个 app 挂到 /blog/* 下
  assetPrefix: "https://cdn.example.com/blog", // 静态资源走 CDN
};

async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        {
          key: 'Strict-Transport-Security',
          value: 'max-age=31536000; includeSubDomains; preload'
        },
      ],
    },
    {
      source: '/_next/static/(.*)',
      headers: [
        { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
      ],
    },
  ]
}

import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const csp = `script-src 'self' 'nonce-${nonce}'; object-src 'none'`;

  const response = NextResponse.next({
    request: {
      headers: new Headers({
        ...Object.fromEntries(request.headers),
        "x-nonce": nonce,
      }),
    },
  });
  response.headers.set("content-security-policy", csp);
  return response;
}

import { headers } from "next/headers";

export default async function Page() {
  const nonce = (await headers()).get("x-nonce");
  return <script nonce={nonce!}>...</script>;
}

浏览器
  ↓
DNS → CDN (CloudFront/Cloudflare)
  ↓ cache miss
反向代理 (Nginx / ALB)
  ↓
Next.js (node server, 多 pod)

upstream nextjs {
  server next-1:3000;
  server next-2:3000;
}

server {
  listen 80;

  # 不缓存 SSR/ISR HTML，让 Next.js 控
  location / {
    proxy_pass http://nextjs;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    proxy_read_timeout 60s;
  }

  # 长 cache 静态资源
  location /_next/static/ {
    proxy_pass http://nextjs;
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

pnpm install && pnpm build && pnpm start
# 访问 http://localhost:3031
# 看 i18n detection；rewrite；redirect