Next.js 13中波斯语动态Segment自动编码能否禁用？

Next13 App Router的动态路由参数默认会自动进行URL解码，这和Next12 Pages Router的行为不同——后者会保留原始的编码字符串。针对你遇到的波斯语Slug多语言问题，这里提供几种可行的处理方案：

方案1：获取原始编码的Slug #

如果你需要和Next12完全一致的原始编码参数，可以通过请求头解析路径来提取未解码的Slug：

import { headers } from 'next/headers'

const page = async () => {
  const headerList = headers()
  // 从NextJS内置头或referer中获取路径
  const pathname = headerList.get('x-nextjs-pathname') || headerList.get('referer') || ''
  // 替换为你的实际路由规则，假设路由为 /blog/[slug]/page.js
  const slugMatch = pathname.match(/\/blog\/([^/]+)/)
  const rawSlug = slugMatch ? slugMatch[1] : ''

  // 直接使用原始编码的Slug请求API
  const data = await get(`/blogPost/data?slug=${rawSlug}`)

  // 其余布局加载逻辑保持不变
  let RunnableLayout = null
  try {
    const { Layout: TempLayout } = await import('PostParts').catch(reason => console.error(reason)) || {}
    RunnableLayout = TempLayout
  } catch (error) {
    console.error(error)
  }

  return RunnableLayout ? <RunnableLayout {...data} /> : <Layout {...data} />
}

export default page

方案2：手动编码解码后的Slug #

如果后端期望的是encodeURI处理后的编码格式，可以对从params拿到的解码后Slug重新编码：

const page = async ({ params }) => {
  const { slug } = params
  // 对解码后的波斯语Slug重新执行encodeURI
  const encodedSlug = encodeURI(slug)
  
  let RunnableLayout = null
  try {
    const { Layout: TempLayout } = await import('PostParts').catch(reason => console.error(reason)) || {}
    RunnableLayout = TempLayout
  } catch (error) {
    console.error(error)
  }

  // 使用重新编码后的Slug请求API
  const data = await get(`/blogPost/data?slug=${encodedSlug}`)

  return RunnableLayout ? <RunnableLayout {...data} /> : <Layout {...data} />
}

export default page

这种方式的编码结果和你在Next12中手动执行encodeURI完全一致，能保证后端接收到的参数格式不变。

关于禁用自动编码/解码 #

目前Next13 App Router没有提供官方配置来禁用动态参数的自动解码，因为这是符合URL标准的设计——路由参数的本质是解码后的文本，方便直接业务逻辑处理。因此更推荐通过上述两种方案适配新的路由行为，而非强行修改默认逻辑。

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