Next.js
A React framework adding routing, server rendering, and app structure.
CurrentintermediateGuide only -- no course yet
Overview
Next.js builds on React by adding file-based routing, server-side rendering/static generation, and a defined project structure, solving problems (routing, data fetching, SEO) that plain React leaves to the developer. This platform itself is built with Next.js.
- What it is
- A production-oriented framework built on top of React, adding routing and rendering strategy.
- Why it's used
- Plain React handles UI but not routing, server rendering, or SEO-friendly output on its own -- Next.js adds those without leaving the React component model.
- Where it fits
- After React fundamentals -- Next.js assumes you already know components, props, and state.
Core concepts
- File-based routing
- Server and Client Components
- Static vs. server rendering
- API routes
Example
A file's location in the app/ directory determines its URL -- routing is structural, not configured in a separate routes file.
// app/about/page.tsx
export default function AboutPage() {
return <h1>About</h1>;
}
// Automatically served at /about -- no router config needed.Common use cases
- Production web applications needing SEO-friendly rendering
- Full-stack apps combining frontend and API routes in one project
Project ideas
- A two-page site (home + about) using file-based routing
- A page that fetches data on the server before rendering