Next.js browser back button updates URL but not page content

Question

I'm building an eCommerce website using Next.js. Everything loads and navigates correctly when browsing categories or product pages using links. However, I'm running into an issue when using the browser's back button (e.g., Chrome).

When I navigate forward to a product or category page, it renders as expected. But when I hit the back button, while the URL in the address bar updates correctly to the previous route, the page content does not update — it stays stuck on the most recent view.

I'm using dynamic routes like /product_category/[slug] and client-side navigation with next/link or router.push. My components rely on useRouter and router.query to fetch data based on the slug.

Is this a common issue in Next.js routing? How can I make sure the page content updates properly when navigating backward?

ahuemmer · Accepted Answer · 2025-05-06 08:48:18Z

When using router.query.slug in dynamic routes (/product_category/[slug]), the value may initially be undefined when navigating back. This can cause your data-fetching logic to fail or not re-run, leading to stale or missing content.

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
    
export default function CategoryPage() {
    const router = useRouter();
    const { slug, isReady } = router;
    const [categoryData, setCategoryData] = useState(null);
    
    useEffect(() => {
        if (!isReady) return;
        const fetchData = async () => {
        const res = await fetch(`/api/category/${slug}`);
        const data = await res.json();
        setCategoryData(data);
    };
    
    fetchData();
}, [slug, isReady]);
    
if (!categoryData) return <div>Loading...</div>;
    return <div>{/* Render category content */}</div>;
}

Add key to force remount.

Sometimes forcing a component remount can also help if state isn’t resetting correctly.

Collectives™ on Stack Overflow

Next.js browser back button updates URL but not page content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related