nextjs dynamic routing problem with spaces

Question

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}`}>

Gh05d · Accepted Answer · 2021-01-26 15:43:02Z

2

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)}`}>

answered Jan 26, 2021 at 15:43

Gh05d

9,08211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nextjs dynamic routing problem with spaces

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related