1. Introduction

Since Next.js 13, the App Router (app/ directory) has replaced the old pages/ system.

It's not just a folder change — it's a complete paradigm shift in routing, layouts, and data fetching.

Let's master it. Step by step.

2. App Router vs Pages Router

3. Nested Layouts

Every folder can have a layout.tsx → automatically nested.

app/├── layout.tsx          // Root layout (html, body)├── dashboard/│   ├── layout.tsx      // Dashboard shell (sidebar)│   └── page.tsx        // Dashboard home└── blog/  └── layout.tsx      // Blog layout (author bio)

No prop drilling. No duplicate code.
Layouts wrap children automatically.

4. Loading and Error States

4.1 Loading UI

// app/dashboard/loading.tsxexport default function Loading() {  return <div className="animate-pulse">Loading dashboard...</div>;}

→ Shows while page.tsx is fetching

4.2 Error Handling

// app/dashboard/error.tsx
'use client';
export default function Error({ error }: { error: Error }) {
  return <p className="text-red-600">Error: {error.message}</p>;
}

5. Route Groups

Use (group) folders to group routes logically — without changing the URL.

app/├── (marketing)/│   ├── about/page.tsx     → /about│   └── contact/page.tsx   → /contact└── (app)/  └── dashboard/page.tsx → /dashboard

Perfect for shared layouts, A/B testing, or team folders

6. Parallel Routes

Render multiple page.tsx in the same layout using @folder syntax.

// app/dashboard/@analytics/page.tsxexport default function Analytics() { return <Chart />; }// app/dashboard/@team/page.tsxexport default function Team() { return <TeamList />; }// app/dashboard/layout.tsxexport default function Layout({  children,  analytics,  team,}: {  children: React.ReactNode;  analytics: React.ReactNode;  team: React.ReactNode;}) {return (  <>    <Sidebar />    <main>{children}</main>    <aside>{analytics}</aside>    <footer>{team}</footer>  </>);}

→ /dashboard shows main + analytics + team simultaneously

7. Route Interception

Intercept a route without navigating — perfect for modals.

// app/@modal/(.)photo/[id]/page.tsx// → /photo/123 → opens as modal, URL stays /feed

Click photo → modal opens, URL updates, back button closes it

8. Common Mistakes

// 1. Mix app/ and pages/app/page.tsx + pages/api/hello.ts → Unpredictable// 2. Put page.tsx in root onlyapp/nested/page.tsx → Must have folder!// 3. Forget 'use client' in client components

9. Best Practices

// 1. Use loading.tsx everywhereapp/settings/loading.tsx → Instant UX// 2. Use route groups for shared layoutsapp/(admin)/users/page.tsxapp/(admin)/settings/page.tsx// 3. Always export default from page/layout

10. Migration Guide

• Migrate from pages/ → app/ gradually
• Use (group) folders for shared layouts
• Add loading.tsx to slow pages
• Replace _app.tsx with nested layout.tsx
• Use @folder for parallel routes
• Test modals with (.)interception

11. Conclusion

The App Router isn't just a new folder.

It's React Server Components, streaming, nested layouts, and zero-JS modals — all in one.

Stop fighting with _app.tsx.
Stop wrapping layouts manually.
Embrace the App Router.

Your app will be faster, cleaner, and more maintainable.

The future of Next.js is here.
Are you ready?

Written by Lina Chen

#NextJS #AppRouter #React #ServerComponents #WebDev #Frontend