seo Question posted in
Some basic information to get you started with this can be found here.

Next.js pretty seo url passing query parameters

I have a product page with path product/[id]/index.js. I would like to ‘prettify’ the product url for SEO purposes. I would like the url to look like product/usb-mouse-black instead of product/121122-001 I need to pass the query ID to populate the product details.

slug=usb-mouse-black

  <Link as={`/reservas/${slug}`} href={{pathname: `/product/[id]`, query: {id: idkey}}}>
    <Button disableElevation size="small" className={classes.button} variant="contained" color="primary" onClick={(event) => { return true }}>Solicitar Disponibilidax</Button>
  </Link>

ID=121122-001

Then I try to get the ID :

 const { id } = router.query

Currently getting usb-mouse-black as ID instead of 121122-001

Tags:

2

Answers


  1. 0

    I just use the Link in it’s most simplified form:

    <Link href={`/product/${idkey}`}>
    <Button disableElevation size="small" className={classes.button} variant="contained" color="primary" onClick={(event) => { return true }}>Solicitar Disponibilidax</Button>
  </Link>

    Remember that /reservas/[id]/index.js is the same as /reservas/[id].js no further configuration is necessary

    Login or Signup to reply.
  2. 0

    It is better to parse the product name on product/[id]/index.js rather than specifying in the Link tag. It will improve the SSO effect in Google and other search engines.

    const { slug } = router.query
const id = parseSlugToId(slug);

    If you still prefer your way, try this:

    <Link as={`/product/${slug}`} href={`/product/${idkey}`}>{ /* your code goes here */</Link>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search