Why Nested routes with folders in NextJS? - Purpose & Use Cases

The Big Idea

Discover how simple folder structure can save you hours of messy routing headaches!

The Scenario

Imagine building a website with many pages and subpages, like a store with categories and products. You try to create each page manually and link them all by hand.

The Problem

Manually managing all these pages and links is confusing and easy to mess up. You might forget to update links or create duplicate files. It becomes hard to keep track of where everything is.

The Solution

Next.js lets you organize pages in folders that match the website structure. Nested folders automatically create nested routes, so your URLs and files stay in sync without extra work.

Before vs After

✗ Before

app.get('/products/electronics', handler)
app.get('/products/clothing', handler)

✓ After

/app/products/electronics/page.js
/app/products/clothing/page.js

What It Enables

This makes your website structure clear and easy to maintain, letting you build complex sites with simple folder organization.

Real Life Example

Think of an online store where you have folders for each category and subcategory. Adding a new product page is as easy as adding a new file in the right folder.

Key Takeaways

Manual page and link management is error-prone and confusing.

Nested folders in Next.js create matching nested routes automatically.

This keeps your project organized and your URLs clean and consistent.