Skip to content

Next.js — React Framework Training

Last reviewed: 2026-05-29

Next.js is a React meta-framework created by Vercel that provides server-side rendering (SSR), static site generation (SSG), API routes, file-based routing, and full-stack capabilities out of the box. It's the recommended framework for production React applications.

Overview

Next.js extends React with: - File-based routing — Pages in app/ or pages/ automatically become routes - App Router (Next.js 13+) — New routing paradigm with React Server Components - Rendering strategies — SSR, SSG, ISR (Incremental Static Regeneration) - API routes — Build backend endpoints alongside frontend - Middleware — Edge-level request interception - Image optimization — Built-in <Image> component - Font optimization — next/font for self-hosted Google Fonts - Turbopack — Rust-based bundler (faster builds)

Training Content

App Router (Next.js 13+)

app/
├── layout.tsx          # Root layout (wraps all pages)
├── page.tsx            # Home page "/"
├── about/
│   └── page.tsx        # /about
├── blog/
│   ├── layout.tsx      # Blog section layout
│   ├── page.tsx        # /blog (list)
│   └── [slug]/
│       └── page.tsx    # /blog/:slug (dynamic route)
└── api/
    └── hello/
        └── route.ts    # API endpoint /api/hello

Server vs Client Components

// Server Component (default in App Router)
// Can be async, direct DB access, no hooks
async function BlogList() {
  const posts = await db.posts.findMany();
  return <ul>{posts.map(p => <li>{p.title}</li>)}</ul>;
}

// Client Component — add "use client" directive
// When you need interactivity, hooks, browser APIs
"use client";
function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>♥</button>;
}

Data Fetching (App Router)

// Fetch at request time (dynamic)
async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{/* render data */}</div>;
}
  • Static by default — fetch() defaults to cache: 'force-cache'
  • Dynamic — cache: 'no-store' or next: { revalidate: 60 } for ISR
  • Server Components fetch directly — no useEffect needed for data

Key Features

Feature Description
SSR Render on each request (dynamic content)
SSG Pre-build at build time (fast, cached)
ISR Re-generate pages periodically (stale-while-revalidate)
Middleware Edge functions for redirects, auth, i18n
Route Handlers Full HTTP API endpoints in app/api/
Server Actions Form submissions without manual API routes

Resources