NextJS动态路由参数编码异常问题咨询

核心原因：URL编码机制与Next.js路由参数的处理逻辑 #

• URL规范要求所有非ASCII字符（比如德语的ü）必须经过**百分号编码（Percent-encoding）**转换为ASCII兼容格式，ü会被编码为%C3%BC，所以实际传输的路由路径是/bundeslander/Th%C3%BCringen。
• 浏览器地址栏会自动对编码后的URL进行解码显示，所以你看到的链接是正常的Thüringen，但背后真实的路由字符串是编码后的形式。
• Next.js在解析动态路由参数时，会直接返回URL中的原始编码片段，不会自动执行解码操作，因此params.name拿到的是Th%C3%BCringen。

正确的解决方式 #

不需要手动替换特殊字符，直接在获取参数时用decodeURIComponent()解码即可：

// 在page.js或layout.js中处理参数
export default function BundeslanderPage({ params }) {
  const decodedName = decodeURIComponent(params.name);
  return <div>{decodedName}</div>; // 正常显示Thüringen
}

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