Making Next.js routing masks – SEO-friendly URLs

If you look at the location bar of the browser when you visit the second page, you'll see something like http://localhost:3000/second?id=0, which is fine, but not pretty enough. We can add some niceness to the URL schema that we use. This is optional, but it's always good to have SEO-friendly URLs instead of query-string parameters.

In order to do that, we should use a special as prop of the Link component:

<Link as={`/post/${index}`} href={{pathname: '/second', query: {id: index}}}>    <a>{post.title}</a></Link>

But, if you visit such a link and reload the page, you will see 404 Page Not Found error. Why is that? It's because URL masking (a technology we just used) works on the client side at ...

Get Next.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.