What is Next.js?

Why Next.js

Plain React runs entirely in the browser, which hurts SEO and first load. Next.js adds server rendering and a huge toolbox, with zero extra config.

What you get

• File-based routing — folders become URLs
• Server components — data fetched on the server
• Built-in image and font optimisation
• API routes for your own endpoints
• One-command deployment to Vercel

Create a project

npx create-next-app@latest my-app\ncd my-app\nnpm run dev

The app folder

app/\n├─ layout.js      # shared shell\n├─ page.js        # home page /\n├─ about/page.js  # /about\n└─ globals.css

File → URL mapping

Tip: In the App Router, page.js is the page content and layout.js is the shared shell around it.