Encoded URL not working in getStaticPaths

[saadq]

I have detailed most of the issue in my StackOverflow question: https://stackoverflow.com/questions/69609567/next-js-encodeuricomponent-doesnt-work-with-in-getstaticpaths. I'm going to be repeating most of the same details here.

---

• 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? Any help would be appreciated, thanks!

---

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

[mayank1513]

Facing same issue. Works well if I remove encodeURI