#Adding custom params

1 messages · Page 1 of 1 (latest)

hollow hullBOT
#

Hi @real warren. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, you can add query parameters to your server-side components using the query object provided by the Next.js router. However, the query object will be empty during prerendering as there is no query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

Here are the cases where the query will be updated after hydration triggering another render:

  • The page is a dynamic-route.
  • The page has query values in the URL.
  • Rewrites are configured in your next.config.js since these can have parameters that may need to be parsed and provided in the query.

To distinguish if the query is fully updated and ready for use, you can leverage the isReady field on next/router.

If you're using getStaticProps, parameters added with dynamic routes to a page will always be available inside the query object.

For example, if you have a page pages/about.js, next build will emit .html files for statically optimized pages. If you add getServerSideProps to the page, it will then be JavaScript.

Here's an example of how you might use the query object in a server-side component:

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  // Will be `undefined` during prerendering
  console.log(router.query.total)

  return <div>Welcome to Next.js!</div>
}

In this example, router.query.total will contain the value of the total query parameter.