Data

Server-Side Fetching

6 min Video + Text

Video lesson placeholder

Next.js is a React framework that gives you building blocks for fast, fullstack web applications. It handles routing, rendering, data fetching, and more — so you can focus on building your product.

Learning Objectives

Understand what Next.js is and why it exists
Know the difference between CSR, SSR, and SSG
Identify when to use Next.js vs plain React

Key Concepts

Server-Side Rendering

HTML is generated on each request for dynamic content.

Static Site Generation

HTML is generated at build time for maximum speed.

File-System Routing

Files in the app/ directory map directly to URL paths.

React Server Components

Components that render on the server with zero client JS.

Your First Next.js App

terminal

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

Open http://localhost:3000 to see your app running.

Build Steps

Create a new Next.js project

Explore the file structure

Edit app/page.tsx

Check the browser output

Quick Quiz

What does SSG stand for?

Server-Side GenerationStatic Site GenerationSingle Source of GraphQLServer-Side Gateway

Next lesson

Client-Side Fetching

Continue