How can I get (query string) parameters from the URL in Next.js?

Question

When I click on a link in my /index.js, it brings me to /about.js page.

However, when I\'m passing parameter name through URL (like

Answer 1

Using Next.js 9 or above you can get query parameters:

With router:

import { useRouter } from 'next/router'

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

  return(
{id}
)
}

With getInitialProps:

const Index = ({id}) => {
  return(
{id}
)
}

Index.getInitialProps = async ({ query }) => {
  const {id} = query

  return {id}
}