Dynamic route not working on page refresh with Next.js

Question

I'm used Next.js but i have an error with dynamic route.

In my application I use getStaticPaths, getStaticProps and this:

<Link
    href={`/offers/[id]?id=${offer.id}`}
    as={`/offers/${offer.id}`}
>
    <a>{offer.title}</a>
</Link>

When I click on this link, I have no problem with the dynamic route to display my page.

But when I refresh the same page, I get this message:

When I looked for a solution the answer was that my Link did not have the right setting when clicked on.

But now I don't click on the link, I just refresh my page.

I use Next.js 10.0.7

Answer 1

Since Next.js 9.5.3 there's no longer the need to use as for dynamic routes. Instead you can directly use the value to interpolate in href.

<Link href={`/offers/${offer.id}`}>
    <a>{offer.title}</a>
</Link>

Alternatively, you can also use a different Link syntax by passing a URL object to it.

<Link
    href={{
        pathname: '/offers/[id]',
        query: { id: offer.id }
    }}
>
    <a>{offer.title}</a>
</Link>