Getting Started with Next.js

Next.js is a React framework that adds routing, server rendering, and build tooling on top of React. This guide gets you from zero to a running app.

Create a new project

npx create-next-app@latest my-app
cd my-app
npm run dev

This scaffolds a project using the App Router, TypeScript, and Tailwind CSS by default.

Understand the App Router

Every folder under app/ maps to a URL segment. A page.tsx file inside a folder makes that segment a route:

app/
  page.tsx          -> /
  about/page.tsx    -> /about
  blog/[slug]/page.tsx -> /blog/:slug

Layouts

A layout.tsx wraps every page below it in the tree and persists across navigations — use it for headers, footers, and sidebars.

Next steps

Add data fetching directly inside your page components with async/await — no separate data-fetching library required for the basics.