javascriptreactjsurlnext.jspathname

nextjs dynamic routing problem with spaces

I meet a problem to access dynamic routes through a product name from my API when the name has spaces. I have no problem accessing routes when the product name is just one word.

utils/api.js

export async function getProduct(name) {
  const products = await fetchAPI(`/books?name=${name}`);
  return products?.[0];
}

pages/books/[name].js

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get products
  const products = await getProducts();
  // Get the paths we want to pre-render based on posts
  const paths = products.map((product) => `/books/${product.name}`)
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

/components/Catalogue.js

<Link href='/books/[name]' as={`/books/${_product.name}`}>
Solution

  • Use encodeURI or encodeURIComponent. This encodes special characters like spaces to ensure that they are not misinterpretad by the browser / server. Your code should look like this:

    export async function getStaticPaths() {
  const products = await getProducts();
  const paths = products.map((product) => `/books/${encodeURIComponent(product.name)}`)
  return { paths, fallback: false }
}

<Link href='/books/[name]' as={`/books/${encodeURIComponent(_product.name)}`}>