Next.js 14中间件结合next-intl实现本地化等功能遇问题求助

项目背景与需求 #

我正在开发基于Next.js 14 App Router的项目，需要整合三个核心中间件功能：

• 省级子域名重写
• 使用next-intl实现本地化
• 为/api/*路由配置CORS头

当前问题 #

next-intl本地化功能失效：

• 无区域标识的路径（如domain.com）不会自动重定向到默认区域（en）
• 默认区域的语言文本始终显示错误

现有代码示例 #

未整合next-intl的中间件代码 #

import { NextRequest, NextResponse } from 'next/server';
import ProvinceSubdomainRewriteMiddleware from '@/services/province-url/province-subdomain';

const addCorsHeaders = (response: NextResponse, origin: string) => {
  const allowedOrigins = [
    'https://example.com',
    'https://region1.example.com',
    'https://region2.example.com',
    ...
  ];

  if (allowedOrigins.includes(origin)) {
    response.headers.set('Access-Control-Allow-Origin', origin);
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    return response;
  }

  return new NextResponse(`Forbidden ${origin}`, { 'status': 403 });
};

export function middleware(request: NextRequest) {
  const response = ProvinceSubdomainRewriteMiddleware(request) || NextResponse.next();

  if (request.nextUrl.pathname.startsWith('/api')) {
    const origin = request.headers.get('origin') || '';

    if (request.method === 'OPTIONS') {
      // const optionsResponse = NextResponse.json(null, { 'status': 204 });
      return addCorsHeaders(NextResponse.next(), origin);
    }

    return addCorsHeaders(response, origin);
  }

  return response;
}

next-intl官方示例中间件（单独使用正常） #

单独使用这段代码时，本地化功能可以正常运行：

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

自行整合后的中间件代码（失效） #

整合后代码无法正常工作，页面始终显示默认语言文本：

import { NextRequest, NextResponse } from 'next/server';
import ProvinceSubdomainRewriteMiddleware from '@/services/province-url/province-subdomain';
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

const handleI18nRouting = createMiddleware(routing);

const addCorsHeaders = (response: NextResponse, origin: string) => {
  const allowedOrigins = [
    'https://example.com',
    'https://region1.example.com',
    'https://region2.example.com',
    ...
  ];

  if (allowedOrigins.includes(origin)) {
    response.headers.set('Access-Control-Allow-Origin', origin);
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    return response;
  }

  return new NextResponse(`Forbidden ${origin}`, { status: 403 });
};

export function middleware(request: NextRequest) {
  const provinceResponse = ProvinceSubdomainRewriteMiddleware(request);
  if (provinceResponse) {
    return provinceResponse;
  }

  const i18nResponse = handleI18nRouting(request);
  let finalResponse = i18nResponse || NextResponse.next();

  if (request.nextUrl.pathname.startsWith('/api')) {
    const origin = request.headers.get('origin') || '';
    if (request.method === 'OPTIONS') {
      finalResponse = addCorsHeaders(NextResponse.next(), origin);
    } else {
      finalResponse = addCorsHeaders(finalResponse, origin);
    }
  }

  return finalResponse;
}

export const config = {
  matcher: '/',
};

补充需求 #

需要实现：访问无区域标识的路径（如domain.com）时，自动重定向到带默认区域的路径（如domain.com/en/），但未找到对应的配置方法。

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