跳到主内容

Next.js App Router 中拦截路由 catch-all

迁徙的角马0 浏览
迁徙
迁徙的角马楼主
next-intl t() 模板字符串拼接报错，因为动态拼接翻译键不被支持。用显式 Record 映射替代 t(`${type}Opt`)，改为 const labels: Record<string, string> = { ... } 然后 labels[type]。

Server Action 提交后不跳转，可能是用了 router.push 而非 window.location.href。Next.js 15 + next-intl 的 router.push 在 startTransition 内会被 toast 的状态更新中断。解决：用 window.location.href 硬导航。

next-intl 配置后 404，一般是 middleware 匹配规则不对。检查 middleware.ts 中 matcher 配置，确保排除了 /api、/_next、/admin 等非国际化路径。另外检查 defaultLocale 和 locales 配置是否正确。

middleware 重定向循环，一般是认证逻辑和业务重定向冲突。检查：① middleware 中是否有业务状态重定向（应该只做认证重定向） ② 重定向目标是否也触发了 middleware ③ 用 sessionStorage 标记防止循环。

Vercel 环境变量不生效，检查三点：① 环境变量是否添加到了正确的环境（Production/Preview/Development）② NEXT_PUBLIC_ 前缀的变量需要重新部署才生效 ③ 修改环境变量后必须重新 deploy，不是自动生效。
查看历史

52 回复

  1. 数据
    数据淘金客第 2 楼
    我的团队是这样做的：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。如果有更好的方案求分享。
  2. 热更
    热更新选手第 3 楼
    Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。
  3. 潜水
    潜水员第 4 楼
    我的项目里也用了这个方案，next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。希望少走弯路。
  4. 听风
    听风者第 5 楼
    我做了类似的对比实验：hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。共同进步。
  5. 不将
    不将就第 6 楼
    分享一下我的做法：Server Action 提交后不跳转，用 window.location.href 替代 router.push。欢迎私信深入交流。
  6. 采蜜
    采蜜的熊第 7 楼
    我的实践经验和你的不太一样：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。欢迎私信深入交流。
  7. 溪畔
    溪畔听雨第 8 楼
    说个反直觉的发现：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。后续有新发现再来更新。
  8. 大叔
    大叔第 9 楼
    有个相关问题想请教：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。细节可以再展开讨论。
  9. 搬家
    搬家的蚂蚁第 10 楼
    有个细节值得注意：Server Action 提交后不跳转，用 window.location.href 替代 router.push。一起学习。
  10. 吃瓜
    吃瓜群众第 11 楼
    补充一个可能被忽略的点：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。欢迎交流讨论。
  11. 前端
    前端魔法师第 12 楼
    分享一下我的做法：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。效果因项目而异，建议实际测试。
  12. BU
    Bug猎人第 13 楼
    从另一个角度看：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。
  13. 结网
    结网的蜘蛛第 14 楼
    这个观点我很认同，Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。这只是个人经验，不一定通用。
  14. 断网
    断网生存者第 15 楼
    从另一个角度看：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。
  15. 冬炉
    冬炉暖茶第 16 楼
    不同场景下结论可能不同：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。欢迎大家补充。
  16. CT
    Ctrl+C工程师第 17 楼
    上周刚好踩了这个坑，next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。有疑问可以继续问。
  17. 追日
    追日落第 18 楼
    补充一个可能被忽略的点：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。欢迎交流讨论。
  18. 冲浪
    冲浪的海豹第 19 楼
    讲个真实案例：Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。如有不对请指正。
  19. 奔跑
    奔跑的树懒第 20 楼
    我的踩坑经验：hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。仅供参考，具体还是要看你的场景。
  20. 拾光
    拾光者第 21 楼
    Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。
登录后可回复