Next.js Discord

Discord Forum

Dynamic routing in Next.js

Unanswered
Ocicat posted this in #help-forum
Open in Discord
Avatar
OcicatOP
Hello. I am doing dynamic routing for the first time and have problem with parameter being undefined.
My path is /pages/discussion/[id].tsx, I enter url /pages/discussion/1 for example and this is my code
  const router = useRouter();
  const {id} = router.query


What am I doing wrong?

3 Replies

Avatar
sabin
Based on the docs (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes), you can access query params in page function arguments like this (when using App Router):

export default function Page({ params }) {
  return <div>{params.id}</div>
}
If using Pages Router (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes), it should work like this:

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>{router.query.id}</p>
}
Note that /pages/discussion/[id].tsx is the route, but the page you visit should be /discussion/1