Shallow routing concept in NextJS - Mini Project: Build & Apply

Shallow Routing Concept in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of products. You want to change the URL query parameters when a user selects a product category, but you want to keep the page from fully reloading or fetching new data from the server.

🎯 Goal: Build a Next.js page that uses shallow routing to update the URL query string without triggering a full page reload or data fetch.

📋 What You'll Learn

Create a Next.js page component named ProductsPage with a list of product categories.

Add a state variable called category to track the selected category.

Use Next.js useRouter hook to update the URL query parameter category with shallow routing.

Render the selected category on the page and update the URL without full reload.

💡 Why This Matters

🌍 Real World

Shallow routing is useful in web apps where you want to update the URL to reflect UI state changes without reloading the page or fetching new data. For example, filtering products or paginating content.

💼 Career

Understanding shallow routing helps you build faster, smoother Next.js applications that improve user experience by avoiding unnecessary page reloads.

1

Setup initial product categories and state

Create a functional component called ProductsPage. Inside it, create a constant array named categories with these exact strings: 'all', 'books', 'electronics'. Also, create a state variable called category initialized to 'all' using useState.

NextJS

import { useState } from 'react';

export default function ProductsPage() {
  // Your code here
}

Need a hint?

Use useState to create category and setCategory. Define categories as an array with the exact strings.

2

Add Next.js router and handle category change

Import useRouter from next/router. Inside ProductsPage, create a constant router by calling useRouter(). Then, write a function called handleCategoryChange that takes a parameter newCategory and calls setCategory(newCategory).

NextJS

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function ProductsPage() {
  const categories = ['all', 'books', 'electronics'];
  const [category, setCategory] = useState('all');
  
  // Your code here
}

Need a hint?

Import useRouter and call it inside the component. Define handleCategoryChange to update the state.

3

Use shallow routing to update URL query

Inside the handleCategoryChange function, after setCategory(newCategory), call router.push to update the URL with the query parameter category=newCategory. Use the current pathname from router.pathname. Pass an options object with shallow: true to enable shallow routing.

NextJS

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function ProductsPage() {
  const categories = ['all', 'books', 'electronics'];
  const [category, setCategory] = useState('all');
  const router = useRouter();

  function handleCategoryChange(newCategory) {
    setCategory(newCategory);
    // Add shallow routing push here
  }
}

Need a hint?

Use router.push with an object for pathname and query. Add { shallow: true } as the third argument.

4

Render category buttons and display selected category

In the return statement of ProductsPage, render a div containing a button for each category in categories. Each button should have an onClick handler that calls handleCategoryChange with the category string. Below the buttons, render a p element that displays the text Selected category: {category}.

NextJS

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function ProductsPage() {
  const categories = ['all', 'books', 'electronics'];
  const [category, setCategory] = useState('all');
  const router = useRouter();

  function handleCategoryChange(newCategory) {
    setCategory(newCategory);
    router.push({ pathname: router.pathname, query: { category: newCategory } }, undefined, { shallow: true });
  }

  return (
    // Render buttons and selected category here
    
      {/* Your code here */}
    
  );
}

Need a hint?

Use categories.map to create buttons. Each button calls handleCategoryChange with the category string. Show the selected category in a paragraph.