It’s important to add a canonical meta tag to your pages to improve SEO or to avoid issues with query params in crawled pages.
You can easily add a canonical meta tag in NextJs by using the next/head component.
import { useRouter } from 'next/router.js'
import Head from 'next/head.js'
// you need to access the route
const router = useRouter()
// then extract the path without template values (e.g. [...slug]) or query params
const canonicalUrl = (
`https://usemiller.dev` + (router.asPath === '/' ? '' : router.asPath)
).split('?')[0]
// Then somewhere in your _app.tsx or top level layout component
return (
<Head>
<link rel="canonical" href={canonicalUrl} />
</Head>
)
