Introduction to Next.js

Next.js is a React framework for production, built by Vercel. React on its own is just a UI library — Next.js adds everything you need to ship a real application: routing, server rendering, data fetching, bundling, and optimization.

What Next.js gives you

• File-based routing — folders and files define your routes, no router config.
• Multiple rendering modes — static (SSG), server-rendered (SSR), and incremental (ISR).
• Server Components — render on the server, ship less JavaScript.
• Server Actions — mutate data on the server without writing API routes.
• Built-in optimization — images, fonts, scripts, and automatic code splitting.
• API routes — build backend endpoints in the same project.

Project structure

app/
  layout.tsx      → root layout (wraps everything)
  page.tsx        → the "/" route
  about/
    page.tsx      → the "/about" route
  blog/
    [slug]/
      page.tsx    → "/blog/:slug" dynamic route

A folder becomes a URL segment. A page.tsx file makes that segment publicly visitable.

A first page

// app/page.tsx
export default function HomePage() {
  return <h1>Welcome to my Next.js app</h1>;
}

That's it — no route registration needed. Save the file and / renders it.