topic: nextjs

Getting Started with the App Router by PRahlad

The Next.js App Router introduces a completely new mental model for building React applications, natively leveraging React Server Components (RSC).

Folder-Based Routing

Instead of putting files inside /pages, you now create folders inside /app, where the folder name becomes the route, and a page.tsx file makes it publicly accessible.

Example Directory

src/
└── app/
    ├── layout.tsx     # Global Layout
    ├── page.tsx       # Domain Root (/)
    └── about/
        └── page.tsx   # About Page (/about)

The Power of Layouts

Layouts (layout.tsx) wrap around your pages. They preserve state across navigations and do not re-render when switching between child pages! This is extremely powerful for things like Sidebar navigation in a Notes app.