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

Question

• 最小重现站点： https ://nextjs-paths-issue.vercel.app/
• 最小重现代码： https ://github.com/saadq/nextjs-encoding-issue
  • 主页
  • 食物页面

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

在主页中，我在创建Link时对 URL 进行编码，然后在getStaticPaths函数中，我使用相同的编码链接创建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

Answer 1

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

---

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

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

Answer 2

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
  }

Answer 3

使用 nextjs 路由器。

使用可以为链接标签添加onclick功能

参考 nextjs 路由器https://nextjs.org/docs/api-reference/next/router

Answer 4

一个旧线程，但我花了很多时间寻找解决方案，所以我想分享一下。

为了在 getStaticPath 中获取格式为 /categories/page 的链接，同时在 /category/ 和 /category/page/ 中使用相同的组件，但参数不同，您应该使用页面格式[...类别].js。 这允许您将 getStaticPaths 中的参数作为数组传递：

params: {
    category: [category, page],
}

结果它将生成页面类别/页面并且仍然有回退：false。 尝试将“/”直接添加到路径（就像您所做的那样）会创建 html 页面类别 %2fpage.html。

有关静态路径和捕获所有路由的更多详细信息