如何合并两个返回NextResponse的Next.js中间件，保留i18n与Auth功能？

直接让两个中间件各自返回Response会导致功能冲突，核心解决思路是让i18n和Supabase逻辑共享同一个Response对象，确保两者的Cookie和处理逻辑都能作用于同一个响应。以下是具体实现代码：

import { NextRequest } from 'next/server';
import { createMiddleware } from 'next-intl/server';
import { createClient } from '@supabase/auth-helpers-nextjs';

export async function middleware(request: NextRequest) {
  // 初始化i18n中间件并获取基础响应
  const i18nMiddleware = createMiddleware({
    locales: ["en", "nl"],
    defaultLocale: "en",
  });
  const response = i18nMiddleware(request);

  // 基于i18n的响应创建Supabase客户端，处理会话逻辑
  const { supabase } = createClient(request, response);
  await supabase.auth.getSession();

  // 返回整合了i18n语言配置和Supabase会话的最终响应
  return response;
}

// 配置中间件匹配规则，按需调整
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

关键说明 #

• 共享Response对象：createClient支持传入自定义的Response实例，这样Supabase会将会话相关的Cookie写入i18n中间件生成的响应中，不会出现覆盖问题。
• 执行顺序：先处理i18n的语言检测和路径重写，再处理身份验证会话，确保路由路径正确。
• 扩展路由保护：如果需要添加未登录重定向等逻辑，可以在getSession后补充判断：

  const { data: { session } } = await supabase.auth.getSession();
  // 示例：未登录用户访问dashboard时重定向到登录页
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/login', request.url));
  }
  

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