URL state with searchParams in NextJS

Introduction

Using URL state with searchParams helps keep track of information in the web address. This makes it easy to share or save the current page view.

You want to remember user choices like filters or sorting on a list page.

You want users to share a link that opens the page with the same settings.

You want to keep the page state after refreshing or navigating back.

You want to read values from the URL to load specific content dynamically.

Syntax

NextJS

import { useSearchParams } from 'next/navigation';

const searchParams = useSearchParams();
const value = searchParams.get('key');

useSearchParams is a React hook from Next.js App Router to read URL query parameters.

It returns a URLSearchParams object to get values by key.

Examples

Get the value of the page parameter from the URL.

NextJS

const searchParams = useSearchParams();
const page = searchParams.get('page');

Get filter parameter or use all if not present.

NextJS

const searchParams = useSearchParams();
const filter = searchParams.get('filter') || 'all';

Get the search term from the URL parameter q.

NextJS

const searchParams = useSearchParams();
const searchTerm = searchParams.get('q');

Sample Program

This component reads the query parameter from the URL and shows it on the page. If no query is in the URL, it shows an empty string.

NextJS

'use client';
import React from 'react';
import { useSearchParams } from 'next/navigation';

export default function SearchPage() {
  const searchParams = useSearchParams();
  const query = searchParams.get('query') || '';

  return (
    <main>
      <h1>Search Page</h1>
      <p>Showing results for: <strong>{query}</strong></p>
    </main>
  );
}

Important Notes

Changing searchParams does not automatically update the component. You need to navigate or refresh to see changes.

Use Next.js navigation methods to update URL parameters and keep UI in sync.

Summary

URL state with searchParams lets you read query parameters from the URL easily.

This helps keep the page state shareable and reloadable.

Use useSearchParams hook in Next.js App Router to access these values.

Practice

1. What does the useSearchParams hook in Next.js App Router do?

easy

A. It fetches data from an API based on URL parameters.

B. It changes the URL path without reloading the page.

C. It reads and lets you access query parameters from the URL.

D. It manages local component state unrelated to the URL.

Solution

1. Step 1: Understand the purpose of useSearchParams

   The hook is designed to read query parameters from the URL, making it easy to access values like ?page=2 or ?filter=active.

2. Step 2: Compare with other options

   Changing URL path or fetching data are different tasks; useSearchParams specifically reads URL search parameters.

3. Final Answer:

   It reads and lets you access query parameters from the URL. -> Option C

4. Quick Check:

   useSearchParams reads URL query parameters = C [OK]

Hint: Remember: useSearchParams reads URL queries, not changes path [OK]

Common Mistakes:

• Confusing useSearchParams with navigation or data fetching hooks
• Thinking it changes the URL instead of reading it
• Assuming it manages local state unrelated to URL

2. Which of the following is the correct way to import and use useSearchParams in a Next.js component?

easy

A. import { useSearchParams } from 'next/navigation'; const params = useParams();

B. import useSearchParams from 'next/router'; const params = useSearchParams();

C. import { useSearchParams } from 'next/router'; const params = useSearchParams();

D. import { useSearchParams } from 'next/navigation'; const params = useSearchParams();

Solution

1. Step 1: Identify correct import source

   In Next.js App Router, useSearchParams is imported from 'next/navigation', not 'next/router'.

2. Step 2: Check usage syntax

   The hook is called as useSearchParams(), returning the params object. Using useParams() is incorrect here.

3. Final Answer:

   import { useSearchParams } from 'next/navigation'; const params = useSearchParams(); -> Option D

4. Quick Check:

   Correct import and call = D [OK]

Hint: Import from 'next/navigation' and call useSearchParams() [OK]

Common Mistakes:

• Importing from 'next/router' instead of 'next/navigation'
• Calling useParams() instead of useSearchParams()
• Using default import instead of named import

3. Given this Next.js component code snippet, what will be logged if the URL is ?page=3&sort=asc?

import { useSearchParams } from 'next/navigation';
export default function Page() {
  const searchParams = useSearchParams();
  console.log(searchParams.get('page'));
  console.log(searchParams.get('sort'));
  return null;
}

medium

A. 3 and asc

B. page and sort

C. null and null

D. undefined and undefined

Solution

1. Step 1: Understand useSearchParams behavior

   useSearchParams returns an object with a .get() method to read query parameters by name.

2. Step 2: Check the URL query parameters

   The URL has ?page=3 and ?sort=asc, so searchParams.get('page') returns '3' and searchParams.get('sort') returns 'asc'.

3. Final Answer:

   3 and asc -> Option A

4. Quick Check:

   searchParams.get('page') = '3', get('sort') = 'asc' [OK]

Hint: Use .get('key') to read exact query values [OK]

Common Mistakes:

• Expecting keys instead of values
• Confusing null with undefined for missing params
• Not calling .get() method on searchParams

4. What is wrong with this Next.js component code that tries to read a search parameter?

import { useSearchParams } from 'next/navigation';
export default function Page() {
  const params = useSearchParams;
  const filter = params.get('filter');
  return <div>Filter: {filter}</div>;
}

medium

A. The import statement is incorrect; it should be from 'next/router'.

B. useSearchParams is not called as a function, so params is the function itself.

C. The component returns invalid JSX syntax with <div> tags.

D. The get method does not exist on the params object.

Solution

1. Step 1: Check how useSearchParams is used

   The code assigns params = useSearchParams without parentheses, so params is the function itself, not the returned object.

2. Step 2: Understand consequence of missing parentheses

   Calling params.get('filter') fails because params is a function, not the searchParams object with .get() method.

3. Final Answer:

   useSearchParams is not called as a function, so params is the function itself. -> Option B

4. Quick Check:

   Missing () after useSearchParams causes error = A [OK]

Hint: Always call useSearchParams() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses when calling hooks
• Importing from wrong module
• Misunderstanding JSX syntax for div

5. You want to build a Next.js page that shows a list filtered by a search term from the URL query parameter search. Which approach correctly updates the displayed list when the URL changes without a full page reload?

import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function SearchPage() {
  const searchParams = useSearchParams();
  const [searchTerm, setSearchTerm] = useState('');

  // Which code below correctly updates searchTerm when URL changes?

  // A:
  // useEffect(() => {
  //   setSearchTerm(searchParams.get('search') || '');
  // }, [searchParams]);

  // B:
  // setSearchTerm(searchParams.get('search') || '');

  // C:
  // useEffect(() => {
  //   setSearchTerm(searchParams.search || '');
  // }, [searchParams]);

  // D:
  // useEffect(() => {
  //   setSearchTerm(searchParams.get('searchTerm') || '');
  // }, [searchParams]);

  return <div>Search: {searchTerm}</div>;
}

hard

A. Use useEffect with dependency on searchParams and call searchParams.get('search').

B. Call setSearchTerm directly without useEffect.

C. Use useEffect but access searchParams.search property (which does not exist).

D. Use useEffect but get 'searchTerm' key instead of 'search'.

Solution

1. Step 1: Understand reactivity to URL changes

   useSearchParams returns a new object when URL changes, so useEffect with [searchParams] dependency runs on URL updates.

2. Step 2: Correctly read the query parameter

   The parameter key is 'search', so use searchParams.get('search'). Accessing searchParams.search or wrong keys will fail.

3. Final Answer:

   Use useEffect with dependency on searchParams and call searchParams.get('search'). -> Option A

4. Quick Check:

   useEffect + searchParams.get('search') updates state on URL change = B [OK]

Hint: Use useEffect with searchParams dependency and .get('search') [OK]

Common Mistakes:

• Calling setState outside useEffect causing infinite loops
• Accessing non-existent properties on searchParams
• Using wrong query parameter keys