Real World Example

Big shops like Amazon India or Nykaa have hundreds of pages, but they follow a handful of route patterns. Here is ShopEase's route map in the App Router:

app/products/layout.tsx adds a category bar to every product page:

import Link from 'next/link';

const categories = ['Mobiles', 'Books', 'Fashion', 'Electronics'];

export default function ProductsLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav className="category-bar">
        {categories.map((c) => (
          <Link key={c} href={'/products?category=' + c.toLowerCase()}>
            {c}
          </Link>
        ))}
      </nav>
      {children}
    </>
  );
}