Cannot use NextJS router query param

[iammarkps]

When I use NextJS router query param the data fetched from SWR seemed to "randomly" be undefined. But when I change to

const id = typeof window !== 'undefined' ? window.location.pathname.split('/')[2] : ''

instead of

const router = useRouter()
const { id } = router.query

The problem just goes away! Any idea why this is happening?

This is the link to my repo https://github.com/programming-in-th/programming.in.th
The fetching is located in /src/pages/tasks/[id].tsx

PS. I see that example doesn't use query param either but use window.location.pathname slicing instead.

[shuding]

Yeah, this is a Next.js behavior actually. To match the hydration (or pre-rendered) result, query will be empty at the beginning:

https://nextjs.org/docs#dynamic-routing