使用next-intl与Supabase Auth时出现诡异404错误求助

问题现象 #

集成next-intl到Next.js App Router后，访问如/rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad这类路由时，前两次刷新会返回404（中间件已返回200），直到第三次刷新才编译出对应带语言前缀的路由。请求日志如下：

middleware /rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad
response: 200
 ✓ Compiled in 1ms
 GET /rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad 404 in 195ms

(refresh)

middleware /rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad
response: 200
 GET /rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad 404 in 96ms

(refresh x2)

middleware /rider/trip/1321fcf9-91ef-4142-9c31-53934d1383ad
response: 200
 ✓ Compiled /[lang]/rider/trip/[tripId] in 60ms
....

原因分析 #

1. 中间件的路由重写规则未正确覆盖无语言前缀的请求，导致请求无法映射到带[lang]参数的App Router路由。
2. App Router的路由结构不符合next-intl要求，根目录下无对应页面，带语言前缀的路由未被预编译。
3. Next.js开发环境缓存机制导致路由未及时加载，需多次触发才完成编译。

解决方案 #

1. 修正中间件配置 #

确保next-intl中间件捕获所有无语言前缀的路由并完成重写，示例配置：

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'zh'], // 替换为你的语言列表
  defaultLocale: 'zh' // 替换为默认语言
});

export const config = {
  // 匹配所有无语言前缀路由、带语言前缀路由
  matcher: ['/', '/(en|zh)/:path*', '/:path*']
};

注意：matcher规则必须覆盖所有需要国际化的路由，保证中间件能拦截请求并重写到带[lang]前缀的路径。

2. 调整App Router路由结构 #

所有页面路由必须放在/app/[lang]/目录下，例如：

• 正确结构：/app/[lang]/rider/trip/[tripId]/page.tsx
• 禁止在/app/rider/trip/[tripId]/下直接创建页面，否则重写后的请求无法匹配到对应路由。

3. 清除开发环境缓存 #

删除项目根目录下的.next文件夹，重启开发服务器强制重新编译路由：

rm -rf .next
npm run dev

4. 验证路由重写逻辑 #

在中间件中添加日志，确认重写后的URL是否符合预期：

import createMiddleware from 'next-intl/middleware';

const baseMiddleware = createMiddleware({
  locales: ['en', 'zh'],
  defaultLocale: 'zh'
});

export default function(req) {
  const res = baseMiddleware(req);
  // 打印重写后的路径
  console.log('Rewritten path:', res.headers.get('x-nextjs-rewrite'));
  return res;
};

export const config = {
  matcher: ['/', '/(en|zh)/:path*', '/:path*']
};

检查日志输出，确认重写后的路径为/[lang]/rider/trip/[tripId]格式。

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