0

Fairly new to NextJs - I am trying to link between a category index page and a dynamically created page, which is using getServerSideProps

I have created a product template page with the following path - /products/[...product]

I am trying to link to it from the index page using this code, but it is not working

import { useRouter } from "next/router";

const router = useRouter()

const handleClick = () => {
  const productUrl = `/products/${slug}`;
  router.push(productUrl);
};

The following code does work, but is not very performant

const handleClick = () => {
  const productUrl = `/products/${slug}`;
  window.location.replace(productUrl);
}

Any ideas on how to implement dynamic pages with next/router would be appreciated

Eddie
  • 31
  • 5

1 Answers1

3

Generally, for accessibility reasons (and also to avoid perf/js issues like the one you're seeing), if a button press is meant to result in a page-change, you should use anchor tags.

In Next.Js to get performant routing, you wrap these tags in a Link:

import Link from 'next/link'

...

<Link href={`/products/${slug}`}>
  <a> See details </a>
</Link>

This will then work with the dynamic slug from props.

Luke Storry
  • 6,032
  • 1
  • 9
  • 22