Nested routes with folders in NextJS - Performance & Optimization

Performance: Nested routes with folders

MEDIUM IMPACT

This affects the page load speed and initial rendering by organizing routes into folders, which impacts how Next.js bundles and serves pages.

Organizing routes for a multi-level page structure

NextJS

app/
  about/
    page.js
    team/page.js
    careers/page.js

Nested folders enable Next.js to split code per route segment, loading only needed code.

📈 Performance GainSmaller initial bundles; faster LCP due to route-based code splitting

Organizing routes for a multi-level page structure

NextJS

pages/
  about.js
  about-team.js
  about-careers.js

All routes are flat, leading to duplicated code and larger page bundles.

📉 Performance CostLarger page bundles due to duplication block rendering longer; delays LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Flat routes in single folder	Low (few nodes)	Low (few reflows)	High (larger bundles delay paint)	[X] Bad
Nested routes with folders	Low (few nodes)	Low (few reflows)	Low (smaller bundles speed paint)	[OK] Good

Rendering Pipeline

Next.js uses nested folders to create route segments that map to separate bundles. When a user navigates, only the relevant bundles load, reducing work in Style Calculation, Layout, and Paint.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Style Calculation due to larger bundles if routes are flat

Core Web Vital Affected

LCP

This affects the page load speed and initial rendering by organizing routes into folders, which impacts how Next.js bundles and serves pages.

Optimization Tips

1Use nested folders to enable route-based code splitting in Next.js.

2Avoid flat route structures that lead to duplicated code and larger bundles.

3Check bundle sizes in DevTools Network tab to verify code splitting.

Performance Quiz - 3 Questions

How does using nested folders for routes in Next.js affect page load?

A It increases DOM nodes causing more reflows.

B It combines all code into one large bundle, slowing down load.

C It enables code splitting, reducing initial bundle size and improving LCP.

D It disables lazy loading of components.

DevTools: Network

How to check: Open DevTools > Network tab, filter by JS files, then navigate between nested routes to see which bundles load and their sizes.

What to look for: Look for smaller JS chunks loading per route and faster page load times indicating good code splitting.