Next.js –encodeURIComponent 不适用于 `getStaticPaths` 中的 `/`答案

【问题标题】：Next.js – encodeURIComponent doesn't work with `/` in `getStaticPaths`Next.js –encodeURIComponent 不适用于 `getStaticPaths` 中的 `/`
【发布时间】：2021-12-05 03:00:00
【问题描述】：

最小复制站点：https://nextjs-paths-issue.vercel.app/
最小复制代码：https://github.com/saadq/nextjs-encoding-issue
- Home page
- Food page

我正在尝试遍历一组食物对象并根据其标题为每个对象创建静态页面。这适用于大多数食物，但如果食物标题包含 /，则导航到页面（例如 the "Nice strawberry/kiwis dessert" page）将引发 404。

在主页中，我在 create the Link 时对 URL 进行了编码，然后在 getStaticPaths function 中，我使用相同的编码链接创建了 paths。但是，它在部署时似乎不起作用。

在运行npm run dev 时，该页面在本地工作，但在实际输出构建中似乎存在问题。我可以做些什么来允许带有编码斜杠的路径工作吗？

首页

const HomePage: NextPage = () => (
  <>
    <h1>Home</h1>
    <ul>
      {foods.map((food) => (
        <li key={food.title}>
          <Link href={`/food/${encodeURIComponent(food.title)}`}>
            {food.title}
          </Link>
        </li>
      ))}
    </ul>
  </>
)

美食页面

export const getStaticProps: GetStaticProps<Props, Params> = (ctx) => {
  const title = ctx.params?.foodTitle as string
  const food = foods.find((food) => food.title === title) as Food

  return {
    props: {
      food
    }
  }
}

export const getStaticPaths: GetStaticPaths = () => {
  const paths = foods.map((food) => `/food/${encodeURIComponent(food.title)}`)

  return {
    paths,
    fallback: false
  }
}

const FoodPage: NextPage<Props> = ({ food }) => {
  return (
    <>
      <Link href='/'>Go Back</Link>
      <h1>{food.title}</h1>
      <h2>Amount: {food.amount}</h2>
    </>
  )
}

export default FoodPage

【问题讨论】：

这能回答你的问题吗？ Next.js: How Can I Make Dynamic Routes With Spaces Work?
@juliomalves 这似乎与空间有关，对吧？与%20 的链接本身似乎并没有引起问题，它似乎只是在涉及/ 时。例如，此链接有效：nextjs-paths-issue.vercel.app/food/Pears%20%26%20Bananas

标签： javascript reactjs next.js nextjs-dynamic-routing

【解决方案1】：

Ofc，因为路径中有 /。 %2F 符号代表/

只需为path编码自定义函数并使用它

static stringToParamUrl(input: string) {      
    let url = input.normalize("NFD").toLowerCase().replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9-_]/g, "-")
    return url
  }

修改： “我使用相同的编码链接创建路径。但是，部署时它似乎不起作用。”如果它起作用了，那是不正确的。除了包含“/”的链接之外，您的其他链接都可以正常工作。 “/”是 URL 的保留字符。在下一个 js 中，它作为“分隔符”工作。

另外（关于链接）：你need to have<a>标签在Link

<Link><a>something</a></Link>

另外（关于后备）：

后备is not changing the URL 逻辑。使用后备将在“第一需求”上生成静态页面 - 与 URL 不起作用无关。您在部署期间没有错误，因为您没有创建静态页面（fallback false）

你需要什么： “我正在尝试遍历一组食物对象并根据其标题为每个对象创建静态页面。” = 您需要在数据库中添加一个名为“URL”的字段或类似的内容, 并根据 URL *您先前在创建数组时生成的) 而不是名称来迭代元素，因为：

您需要有“唯一”网址（通过 [pid] 参数或其他方式从您的 api 获取数据）
您需要在网址中avoid reserved and forbidden 符号
最好美化网址。（我和你分享了一个函数）

也许我没有正确理解你的问题

【讨论】：

Ofc，因为路径中有 /。 %2F 代表 / 的符号我对你的意思有点困惑。编码的目的不是让/之类的东西转换成%2F之类的东西，然后如果这些符号是URL的一部分就不是问题了吗？
请检查我的帖子的修改

【解决方案2】：

我在此处发布的示例有点做作，对于我的实际应用程序，我能够通过使用 fallback: 'blocking' 使其工作。不幸的是，它不再是一个完全可导出的静态网站，但我只有几个页面会遇到这个问题，所以其中一些页面从服务器加载时间会很短。

https://nextjs.org/docs/basic-features/data-fetching

// 我们将在构建时仅预渲染这些路径。 // { fallback:blocking } 将服务器渲染页面 // 如果路径不存在，则按需提供。返回{路径，后备：'阻塞'}

【讨论】：