URL state with searchParams in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the current URL's search parameters using Next.js hooks.

NextJS

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = [1]();
  return <div>Search Params Loaded</div>;
}

Drag options to blanks, or click blank then click option'

AuseRouter

BuseState

CusePathname

DuseSearchParams

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter instead of useSearchParams

Trying to access searchParams directly without a hook

The useSearchParams hook from Next.js lets you access the URL's query parameters easily.

2fill in blank

medium

Complete the code to read the value of the 'page' parameter from the URL search params.

NextJS

const page = searchParams.[1]('page');

Drag options to blanks, or click blank then click option'

Aget

BgetAll

Chas

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using getAll which returns an array

Using set which modifies params instead of reading

The get method retrieves the first value of a given search parameter key.

3fill in blank

hard

Fix the error in the code to update the URL search params with a new 'filter' value.

NextJS

const searchParams = useSearchParams();
const newParams = new URLSearchParams(searchParams);
newParams.[1]('filter', 'active');

Drag options to blanks, or click blank then click option'

Aset

Bappend

Cget

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using append which adds duplicate keys

Using get which only reads values

The set method updates or adds a key-value pair in URLSearchParams.

4fill in blank

hard

Fill both blanks to create a new URL with updated search params and navigate to it using Next.js router.

NextJS

import { useRouter } from 'next/navigation';

const router = useRouter();
const newParams = new URLSearchParams(searchParams);
newParams.set('sort', 'desc');
router.[1](`/products?$[2]`);

Drag options to blanks, or click blank then click option'

Apush

BnewParams.toString()

Creplace

DsearchParams.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Using replace instead of push when you want navigation history

Using searchParams.toString() which is the old params, not updated

Use router.push to navigate to a new URL. The toString() method converts URLSearchParams to a query string.

5fill in blank

hard

Fill all three blanks to create a React component that reads 'category' from URL, updates it on button click, and navigates.

NextJS

import { useSearchParams, useRouter } from 'next/navigation';
import React from 'react';

export default function CategoryFilter() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const category = searchParams.[1]('category') || 'all';

  function updateCategory() {
    const newParams = new URLSearchParams(searchParams);
    newParams.[2]('category', 'books');
    router.[3](`/shop?${newParams.toString()}`);
  }

  return <button onClick={updateCategory}>Show Books</button>;
}

Drag options to blanks, or click blank then click option'

Aget

Bset

Cpush

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using append instead of set to update category

Using replace instead of push for navigation

Use get to read the category, set to update it, and push to navigate to the new URL.

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