Router - NextJS

Router Tips

Dynamic Routes + Query Params / Hash

If you want to add query parameters or hash to a dynamic URL in Next, you have to append it to the as prop:

import { useRouter } from "next/router";
const router = useRouter();
// router.push('/slides/[slide]', '/slides/1?mode=slideshow#1')
`/slides/${router.query.slide}?mode=${MODES.SLIDESHOW}#${prevState + 1}`,
{ shallow: true }

We pass the shallow parameter so the URL doesn't get pushed to history and won't trigger a refresh of the page (and methods like getInitialProps).

Instead of this, which doesn't work:

// ⛔️ Don't do
`${router.pathname}?mode=${MODES.SLIDESHOW}#${prevState + 1}`,
{ shallow: true }