Before we get started with understanding how we can do URL state management in Next.js, let’s see how we can get various URL info in Next.js

A URL (Uniform Resource Locator) with parameters typically consists of several components:

1. Scheme: Specifies the protocol used to access the resource, such as or .

2. Domain: The domain name or IP address of the server hosting the resource.

3. Port: (Optional) Specifies the port number to which the request should be sent. Default ports are often omitted (e.g., port for HTTP, port for HTTPS).

4. Path: The specific resource or endpoint on the server, typically represented as a series of directories and filenames.

5. Query Parameters: (Also known as in Next.js) Additional data sent to the server as part of the request, typically used for filtering or modifying the requested resource. Query parameters are appended to the URL after a question mark and separated by ampersands

   For example:

6. Fragment: (Optional) Specifies a specific section within the requested resource, often used in web pages to navigate to a particular section. It is indicated by a hash followed by the fragment identifier.

We can retrieve this URL information in Next.js in different ways:

• Page If you’re on the main file, then you can access the information through props

  function Page({ params, searchParams }) {
    return <h1>My Page</h1>;
  }
  
  export default Page;

  For example, If the URL looks like this:

  Then,

  • will hold the value
  • will hold & values This is how you can get the info

  async function Page({ params, searchParams }) {
    const { id } = await params;
    const { page, filter } = await searchParmas;
  
    return <h1>My Page</h1>;
  }
  export default Page;
  Insight

  💡 You can learn more about and here

  From here, you can choose to pass these values to other components or use other options to access them specifically inside that component And that other way is,

• Hooks Next.js provides two specific hooks, namely and , to retrieve the respective information from the URL This is how we can access (dynamic part of the URL)

  "use client";
  
  import { useParams } from "next/navigation";
  
  function ExampleClientComponent() {
    const params = useParams();
  
    return <p>Example Client Component</p>;
  }
  
  export default ExampleClientComponent;
  Insight

  You can learn more about hook here. We can access searchParams (aka query parameters) of URL in the same way, using the hook

  "use client";
  
  import { useSearchParams } from "next/navigation";
  
  export default function SearchBar() {
    const searchParams = useSearchParams();
    const type = searchParams.get("type");
  
    return <>Selected Type: {type}</>;
  }
  Insight

  Learn more about the hook here.

Yes, you’re right. Using hooks would mean turning that component into a client component.

As a rule of thumb, if your component is near its parent , then instead of opting for these hooks, you can pass and of props to its respective children. A bit of prop drilling won’t hurt.

But if the component is far away from , you should use the above-mentioned hooks instead.

Now that you know how to access information from the URL, let’s see how we can add any kind of information to the URL in Next.js

See you in the next lesson 👋