在 Next JS Router 中结合 Next-Intl 和 Supabase 中间件

Question

我有一个 NExt JS 项目，使用应用程序路由器和 Supabase。

我有一个 ROOT middleware.js 文件，其中包含一些 supabase 代码。我还需要将 Next-Intl 中间件集成到其中，但我不知道如何去做。

这是我的 ROOT middleware.js 代码；

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

据我了解（有限），我需要在某处使用以下内容；

import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
 
  // Used when no locale matches
  defaultLocale: 'en'
});
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};

Answer 1

您可以在

intlMiddleware

函数中调用

middleware

。该函数是在每个请求上运行的主要中间件。

const intlMiddleware = createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
  
  // Used when no locale matches
  defaultLocale: 'en'
});

export async function middleware(request: NextRequest) {

  const intlResponse = intlMiddleware(request);
  if (intlResponse) {
    return intlResponse;
  }

  return await updateSession(request);
}

您可以通过合并这两个来调整您的配置：

export const config = {
  matcher: [
    '/', 
    '/(de|en)/:path*',
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'
  ],
};

如果您只想对某些路径应用某些中间件功能，请查看以下资源：

https://nextjs.org/docs/messages/nested-middleware 如何通过 middleware.ts 文件在 Next.js 中使用多个中间件？