Learn Code and Practice

What Next.js Is and Why You'd Use It

React on its own is just a UI library. To build a real app you need: routing, server-side rendering, file uploads, an API layer, image optimisation, deployment, caching… Next.js bundles all of that around React. It's the most popular React framework, and the reference implementation for Server Components.

If you build with React in 2026, you're very likely doing it inside Next.js (or its competitor Remix).

File-Based Routing — No Router Needed

In the App Router, every folder under /app becomes a URL segment. A page.tsx inside makes it a route.

app/
├── page.tsx                → /
├── about/page.tsx          → /about
├── blog/
│   ├── page.tsx            → /blog
│   └── [slug]/page.tsx     → /blog/anything
└── (marketing)/            → grouping folder, not in URL
    └── pricing/page.tsx    → /pricing

Special filenames inside any folder:

File	Purpose
`page.tsx`	The actual page UI
`layout.tsx`	Wraps every page in this folder + children
`loading.tsx`	Shown while the page streams in
`error.tsx`	Caught error UI for the segment
`not-found.tsx`	404 for the segment
`route.ts`	API endpoint (instead of page)

Your First Page

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About us</h1>;
}

That's a real route at /about. No imports, no router config.

Layouts — Shared UI That Doesn't Re-Render

// app/layout.tsx — wraps every page in the app
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Nest layouts by putting more layout.tsx files in subfolders. Layouts persist across navigation — a sidebar doesn't unmount when the main area changes.

Dynamic Routes

app/blog/[slug]/page.tsx

export default async function BlogPost({ params }) {
  const { slug } = await params;       // Next 15+: params is a Promise
  const post = await getPost(slug);
  return <h1>{post.title}</h1>;
}

The folder [slug] matches any string. Use [...slug] for catch-all (/blog/a/b/c).

Linking Without Reloading

import Link from "next/link";<Link href="/about">About</Link>

is a beefed-up that does client-side navigation and prefetches the linked page when it scrolls into view.

Server vs Client Components

Every component in /app is a Server Component by default:

// Runs ONLY on the server. Zero JS shipped to the browser.
async function Posts() {
  const posts = await db.query(...);   // direct DB call!
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

For interactivity (useState, onClick, browser APIs), opt into a Client Component with a directive:

"use client";
import { useState } from "react";export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Mental model: most pages are Server Components, sprinkled with small interactive Client Component "islands".

Data Fetching — Just `await`

In a Server Component you fetch data inline:

export default async function Users() {
  const res = await fetch("https://api.example.com/users");
  const users = await res.json();
  return <List items={users} />;
}

No useEffect, no loading state, no race conditions. The page renders on the server with the data already in place.

Beginner Mistakes to Skip

1. Adding useState to a server component — error. Mark the file "use client" or split out a small client component. 2. Importing a server-only module into a client component — bundling explosion. Server-only utilities should never reach /client files. 3. Forgetting that params and searchParams are Promises in Next 15+ — await them. 4. Using next/link with inside unnecessarily — modern renders the itself. 5. Storing secrets in code that runs on the client — only NEXT_PUBLIC_* env vars are exposed; everything else stays server-side.

Intermediate: Caching & Revalidation

Next.js extends fetch with cache controls:

// Cached indefinitely (build-time, like SSG)
fetch(url, { cache: "force-cache" });
// Revalidate every 60 s (ISR)
fetch(url, { next: { revalidate: 60 } });
// Always fresh (SSR-like)
fetch(url, { cache: "no-store" });// Tag-based invalidation
fetch(url, { next: { tags: ["posts"] } });
// later:
revalidateTag("posts");

The framework decides at build time whether each route is static (built once) or dynamic (built per request) based on these hints.

Intermediate: Loading & Streaming

Drop a loading.tsx next to a page and Next streams it instantly while the page is being prepared:

// app/dashboard/loading.tsx
export default function Loading() {
  return <Spinner />;
}

Use boundaries inside a page to stream individual slow chunks:

<Suspense fallback={<Skeleton />}>
  <SlowChart />
</Suspense>
<Suspense fallback={<Skeleton />}>
  <SlowTable />
</Suspense>

The user sees the shell + skeletons immediately; chunks fill in as data arrives.

Intermediate: API Route Handlers

// app/api/users/route.ts
import { NextResponse } from "next/server";
export async function GET() {
  const users = await db.query(...);
  return NextResponse.json(users);
}export async function POST(req: Request) {
  const body = await req.json();
  // ...
  return NextResponse.json({ ok: true });
}

Each HTTP verb is its own export. Place route.ts anywhere under /app to mount that endpoint.

Intermediate: Server Actions — Forms Without Endpoints

// app/posts/new/page.tsx
async function createPost(formData: FormData) {
  "use server";
  const title = formData.get("title");
  await db.posts.insert({ title });
  revalidatePath("/posts");
}export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>Save</button>
    </form>
  );
}

The function runs on the server but you wired it up directly to a form. No API route to maintain. Game-changer for CRUD UIs.

Intermediate: Metadata & SEO

Export a metadata object (or a generateMetadata async function) from any page or layout:

export const metadata = {
  title: "My Page",
  description: "...",
  openGraph: { images: ["/og.png"] },
};

Strategy	When Content Generates	Use Case
SSG	At build time	Blog, docs, marketing
SSR	On each request	Personalized dashboards
ISR	Build + revalidate	Product pages
CSR	In the browser	Interactive widgets

Next.js Essentials

Next.js — The React Framework for Production

App Router (Next.js 13+)

Folder = Route

Rendering Strategies

Server vs Client Components

API Routes

On this page

What Next.js Is and Why You'd Use It

File-Based Routing — No Router Needed

Your First Page

Layouts — Shared UI That Doesn't Re-Render

Dynamic Routes

Linking Without Reloading

Server vs Client Components

Data Fetching — Just `await`

Beginner Mistakes to Skip

Intermediate: Caching & Revalidation

Intermediate: Loading & Streaming

Intermediate: API Route Handlers

Intermediate: Server Actions — Forms Without Endpoints

Intermediate: Metadata & SEO