Next.js 13.3中间件重写导致SSR页面props偶发未定义

问题背景 #

基于Next.js 13.3开发带翻译URL的多语言站点，为避免大量重写/重定向配置破坏客户端导航，采用中间件处理翻译路由。但在非英文语言环境（存在路由重写的场景）下，通过next/link导航至SSR页面时，有50%概率出现页面Props全部未定义的问题：

• getServerSideProps执行正常，控制台能打印数据，但Props无法传递到页面
• 直接访问SSR页面则完全正常
• 推测静态页面重新生成时也会出现同类问题

原代码问题点 #

原重写逻辑中使用new URL(rewrite.destination, req.url)构建目标URL，这是导致问题的核心原因：

// 原错误代码
return NextResponse.rewrite(new URL(rewrite.destination, req.url))

Next.js中间件的req.nextUrl对象附带了框架内部维护的路由上下文元数据（包括locale、路由参数、SSR数据传递的关联标识等）。直接创建新的URL对象会丢失这些元数据，导致客户端导航时，Next.js无法正确关联重写后的路由与原SSR页面的Props传递逻辑，最终出现Props丢失。

修复方案 #

改用req.nextUrl.clone()修改pathname的方式，保留Next.js内部的路由上下文元数据：

// 修复后代码
const url = req.nextUrl.clone()
url.pathname = rewrite.destination
return NextResponse.rewrite(url)

这种方式在原有路由上下文基础上修改路径，确保重写后的路由能正确关联到对应的SSR页面，Props即可正常传递。

总结 #

在Next.js中间件中处理路由重写时，必须基于req.nextUrl.clone()修改路径，而非直接创建新URL对象。后者会破坏框架内部的路由上下文关联，引发SSR Props丢失、静态页面生成异常等问题。

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