URL state with searchParams in NextJS - Mini Project: Build & Apply

URL state with searchParams in Next.js

📖 Scenario: You are building a simple product filter page in Next.js. The page should read a category from the URL's search parameters and show it on the page. This helps users share filtered views by URL.

🎯 Goal: Create a Next.js functional component that reads the category search parameter from the URL and displays it. The component should update if the URL changes.

📋 What You'll Learn

Use Next.js App Router with a functional component

Use the useSearchParams hook to read URL search parameters

Display the current category parameter value on the page

Update the displayed category if the URL changes

💡 Why This Matters

🌍 Real World

Many web apps use URL search parameters to keep track of filters or settings so users can share links with the current view.

💼 Career

Understanding how to sync UI state with URL parameters is important for building user-friendly, shareable web applications in Next.js.

1

Create a basic Next.js functional component

Create a functional component called CategoryFilter that returns a <div> with the text Filter page inside.

NextJS

# Your code here

Need a hint?

Start with export default function CategoryFilter() { return <div>Filter page</div>; }

2

Import and use the useSearchParams hook

Import useSearchParams from next/navigation and call it inside CategoryFilter to get the search parameters object called searchParams.

NextJS

import { useSearchParams } from 'next/navigation';

export default function CategoryFilter() {
  // Get searchParams here
  
  return Filter page;
}

Need a hint?

Use import { useSearchParams } from 'next/navigation' and then const searchParams = useSearchParams() inside the component.

3

Read the category parameter from the URL

Use searchParams.get('category') to get the category value from the URL and store it in a variable called category inside the CategoryFilter component.

NextJS

import { useSearchParams } from 'next/navigation';

export default function CategoryFilter() {
  const searchParams = useSearchParams();
  // Get category from searchParams
  
  return Filter page;
}

Need a hint?

Use const category = searchParams.get('category') to read the category parameter.

4

Display the category value dynamically

Update the returned JSX to show the text Selected category: followed by the category variable inside a <p> tag. If category is null, show No category selected instead.

NextJS

import { useSearchParams } from 'next/navigation';

export default function CategoryFilter() {
  const searchParams = useSearchParams();
  const category = searchParams.get('category');
  // Show category or fallback text
  
  return Filter page;
}

Need a hint?

Use JSX with {category ?? 'No category selected'} inside a <p> tag.