Next.js URL Parameters: Get and Set URL Params with Examples

This article will guide you on how to work with URL query parameters in Next.js. How to set and get URL parameters, also how to update the URL without a history link, and dealing with dynamic query parameters.

In dynamic applications, we may require to handle the query parameters in the URL. In this tutorial, you will learn how to fetch the URL param values and also how to set them dynamically.

[lwptoc]

URL Parameters in Next.js

URL query parameters provide a way to pass data to from one web page to another. In the context of Next.js, you may need to get or set the values from URL parameters when dealing with dynamic routes.

 

How to Set URL Parameters

Let’s have a look at how to set URL parameters in the Next.js application. This is done when defining routes in the Next.js application. Here’s an example:

// Filename: pages/post/[id].js
import { useRouter } from 'next/router'

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

  // rest of your component
}

In the above code, [id] acts as a dynamic segment of the URL. When a user navigates to a URL like /post/1, the id becomes 1.

 

How to Get URL Parameters

Retrieving URL parameters in Next.js is also very simple. The useRouter hook in Next.js provides access to the router object, which contains the query object where all URL parameters are stored. Here’s an example:

// Filename: pages/post/[id].js
import { useRouter } from 'next/router'

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

  // rest of your component
}

In this example, id is retrieved from the query object, making it available for use within the PostPage component.

 

Updating URL without History Link

We can update the URL without adding it to the history links stack. For that, we can use the router.replace method from Next.js.

This method takes the same arguments as router.push, but it replaces the current URL instead of pushing a new one. We can access the router object in any function component’s useRouter hook as shown below

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.replace('/home')}>
      Go to home
    </button>
  )
}

 

Dynamic Query Parameters

To use dynamic query parameters in Next.js, you can use brackets ( [param] ) in your page file name to create a dynamic route.

For example, if you have a file called pages/post/ [id].js, it will match any route like /post/1, /post/2, etc. The matched parameter will be sent as a query object to the page component, and you can access it using the useRouter hook. For example:

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query // get the id parameter from the query object

  return <p>Post: {id}</p>
}

You can also use catch-all routes ( […param] ) to match any number of parameters, or optional catch-all routes ( [ […param]] ) to make them optional.

 

Conclusion

We discuss how to get and set URL parameters in the Next js application. Also, we discussed how to replace the existing URL in the history to prevent the history URL stack.