Next.js Query Parameters: How to Set and Get URL parameters

In this article, you will learn how to set and get URL query parameters in URL of the Next js application. Also we will discuss how to update the Next js application URL without adding to the history stack of links in the browser.

We will thoroughly cover the various use cases related to the URL parameters in the Next js application for example how to set and get URL parameters, update the URL without a history link, and use dynamic query parameters.

We will also discuss a detailed step-by-step process by providing examples for better understanding. Let’s get started to learn how to handle URL query parameters in the Next js application.

[lwptoc]

What’s Next.js Query Parameters?

URL query parameters help to pass data between dynamic pages in the form of public information. In Next.js, we can easily play with query parameters, the setting and fetching of values from URL params is quite straightforward.

The parameters are a kind of key-value pairs which follow the main URL. It starts with a question mark (?) for the first query param in the URL and after that, the parameters are separated by an ampersand (&).

For example, in http://example.com?page=2&sort=asc, page and sort are query parameters.

 

How to Set URL Parameters in Next.js

We can use the router.push method from the next/router package to navigate to a new URL with the required parameters. By using the router.push(...) method we can set the URL query params very easily. Here’s a quick example:

import { useRouter } from 'next/router'

function ComponentName() {
  const router = useRouter()

  const handleClick = () => {
    router.push('/path?parameter=value')
  }

  return (
    <button onClick={handleClick}>
      Navigate
    </button>
  )
}

In the above code, when the button is clicked, the user is navigated to ‘/path’ with the query parameter set to ‘value’.

 

How to Get URL Parameters in Next.js

Let’s have a look, at how to fetch the Query param values from the URL. The useRouter hook provided by Next.js provides access to the query object. This object contains the query parameters. Below is an example where the HomePage component fetches two query parameters, param1 and param2, from the URL:

import { useRouter } from "next/router";

function HomePage() {
  const router = useRouter();
  const { query } = router;
  const { param1, param2 } = query;

  return (
    <div>
      <h1>Fetch URL Query Parameters in Next.js!</h1>
      <div>Param 1: {param1}</div>
      <div>Param 2: {param2}</div>
    </div>
  );
}

export default HomePage;

 

Updating the URL Without the History Link

In some cases, we might want to update the URL without adding an entry to the browser’s history. This can be done in Next.js by using the router.replace method instead of router.push which we used earlier. Here’s how it can be done:

import { useRouter } from 'next/router'

function ComponentName() {
  const router = useRouter()

  const handleClick = () => {
    router.replace('/path?parameter=value')
  }

  return (
    <button onClick={handleClick}>
      Navigate
    </button>
  )
}

In this code, the URL is replaced with ‘/path’ along with the ‘parameter’ set to ‘value’, but this change won’t be recorded in the browser’s history.

 

Dynamic Query Parameters

Next.js also provides the ability to pass dynamic query parameters. This means you can pass variable data as a parameter as shown below:

import { useRouter } from 'next/router'

function ComponentName() {
  const router = useRouter()

  const handleClick = (dynamicValue) => {
    router.push(`/path?parameter=${dynamicValue}`)
  }

  return (
    <button onClick={() => handleClick('dynamicValue')}>
      Navigate
    </button>
  )
}

 

How to Get Current URL Partial or Full in Next js?

In this section we will discuss how to get Current URL in Next js application. You can use the useRouter hook to get the current URL in Next js application. The router object provided by this hook includes several properties to construct the current URL.

import { useRouter } from 'next/router'

function CurrentUrl() {
  const router = useRouter()

  return (
    <div>
      Current URL is: {router.asPath}
    </div>
  )
}

In this above code , the  router.asPath gives the path string, which includes the query string. This is the part of the URL that comes after the domain name. For example, if the full URL is http://example.com/path?param=value, router.asPath would return /path?param=value.

 

How to Get Full Current URL in Next js App?

If you want to get the full Current URL with the domain, you can use the window object in the browser. However, be aware that the window object is not available on the server, so we can also add a check if it exists to prevent any possible errors during server-side rendering.

import { useRouter } from 'next/router'

function CurrentUrl() {
  const router = useRouter()
  const fullUrl = typeof window !== 'undefined' ? window.location.href : '';

  return (
    <div>
      Current URL is: {fullUrl}
    </div>
  )
}

In this above, the window.location.href gives the full current URL if the window object is available. If not will return an empty string.

 

Conclusion

Next.js provides very easy-to-use APIs to handle URL query parameters. Which helps in creating and building dynamic applications. We have learned use cases with examples like how to set and get URL parameters, update the URL without a history link, and pass dynamic query parameters.

Dynamic query parameters can help in setting up pages with paginated data or tabular data with sorting-like features.