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

Question

• Minimal repro site: https://nextjs-paths-issue.vercel.app/
• Minimal repro code: https://github.com/saadq/nextjs-encoding-issue
  • Home page
  • Food page

I am trying to iterate through an array of food objects and create static pages for each one based on its title. This works for most of the foods, but if the food title contains a / , then navigating to the page (such as the "Nice strawberry/kiwis dessert" page ) will throw a 404.

In the home page, I encode the URL when I create the Link and then in the getStaticPaths function , I create the paths using the same encoded link. However, it doesn't seem to work when deployed.

The page does work locally when running npm run dev , but it seems that in the actual output build there are issues. Is there something I can do to allow paths with encoded slashes to work?

---

Home page

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>
  </>
)

Food page

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

The example I posted here is a bit contrived, for my actual app I was able to get it to work by using fallback: 'blocking' . It's not a totally exportable static website anymore unfortunately, but I only have a few pages that will run into this issue so it's fine that a few of them will have a slight loading time from the server.

---

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

// We'll pre-render only these paths at build time. // { fallback: blocking } will server-render pages // on-demand if the path doesn't exist. return { paths, fallback: 'blocking' }

Answer 2

Ofc, because you have / in the path. %2F symbol representing /

Just make custom function for path encoding and use it

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

Answer 3

Use nextjs Router.

Use can add onclick function for link tag

Refer nextjs Router https://nextjs.org/docs/api-reference/next/router

Answer 4

An old thread, but I've spent many hours looking for a solution so I'd like to share.

In order to get links in the format /categories/page in getStaticPath, and at the same time to use the same component in the /category/ and in the /category/page/, but with different parameters, you should use the page format [...category].js. This allows you to pass parameters in getStaticPaths as an array:

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

In result it will generate page category/page and still have fallback: false. Trying to add '/' directly to the path (as you did) creates html pages category%2fpage.html.

More details about static pathsAnd about catch all routes