Next.js App Router中整合Next-Intl与Supabase中间件的方法

要同时实现Next-Intl的国际化路由和Supabase的会话管理，你需要将两个中间件的逻辑链式结合，而非简单替换。以下是完整的实现方案：

完整的middleware.js代码 #

import { NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import { updateSession } from '@/lib/supabase'; // 替换为你实际的updateSession导入路径

// 初始化Next-Intl国际化中间件
const intlMiddleware = createMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});

// 链式执行两个中间件逻辑
export async function middleware(request: NextRequest) {
  // 第一步：处理国际化路由重定向、Locale注入
  const intlResponse = await intlMiddleware(request);
  
  // 第二步：用当前请求和国际化处理后的响应更新Supabase会话
  return await updateSession(request, intlResponse);
}

// 配置匹配规则：保留静态资源排除规则，覆盖所有需处理的业务路径
export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

关键细节说明 #

1. 中间件链式调用：先通过intlMiddleware完成国际化路由处理（比如根路径重定向到默认语言路由、校验Locale合法性），再将处理后的请求和响应传入updateSession，确保Supabase会话Cookie能正确附加到最终响应中。

2. updateSession适配：确保你的updateSession函数支持接收response参数（用于设置Supabase会话Cookie）。如果原函数仅接收request，需调整为如下形式：

// 示例：调整后的updateSession
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { NextRequest, NextResponse } from 'next/server';

export async function updateSession(request: NextRequest, response: NextResponse) {
  const supabase = createServerComponentClient({ req: request, res: response });
  await supabase.auth.getSession();
  return response;
}

3. 匹配规则合并：保留Supabase原有的静态资源排除规则，避免中间件处理不必要的静态文件请求，Next-Intl会自动在匹配的业务路径中处理国际化逻辑。

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