Introduction to Next.js

Next.js is a React framework that adds routing, rendering, data fetching, and production tooling on top of the React library. This lesson introduces what Next.js is, why teams choose it over plain React, and what you will learn throughout this course.

What Is Next.js?

React is a UI library for building components, but it does not ship with routing, data fetching conventions, bundling, or a deployment story out of the box. Next.js, created by Vercel, fills those gaps by layering a complete application framework on top of React: file-based routing, server rendering, API endpoints, image and font optimization, and a build pipeline are all included by default.

Since Next.js 13, the framework has shipped the App Router, built around the app/ directory, React Server Components, and native support for layouts, loading states, and streaming. The older Pages Router (the pages/ directory) still ships and is fully supported, but the App Router is now the recommended default for new projects and is the primary focus of this course.

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

Every file named page.tsx inside the app/ directory automatically becomes a route. This one file, at app/page.tsx, renders your site's homepage — no router configuration required.

How a Next.js Project Is Structured

my-next-app/
  app/
    layout.tsx      // Root layout, wraps every page
    page.tsx        // Route: /
    about/
      page.tsx      // Route: /about
  public/           // Static assets served from /
  next.config.js    // Framework configuration
  package.json

The app/ directory defines routes using folders; a folder named about becomes the /about route.
A page.tsx file makes a route segment publicly accessible and renderable.
A layout.tsx file wraps child routes with shared UI, such as navigation or a footer.
Files in public/ are served as-is from the root URL, e.g. public/logo.png → /logo.png.

Next.js at a Glance

The essential vocabulary you need before writing your first Next.js route.

Concept	Example	Purpose
App Router	`app/` directory	File-based routing with Server Components
Page	`app/page.tsx`	Makes a route segment publicly renderable
Layout	`app/layout.tsx`	Shared UI wrapping child routes
Server Component	Default in `app/`	Renders on the server, no client JS shipped
Client Component	`"use client"` directive	Adds interactivity in the browser
Route Handler	`app/api/route.ts`	Server-side HTTP endpoint
CLI	`npx create-next-app@latest`	Scaffolds a new Next.js project

Why Teams Choose Next.js

Plain React gives you components and state, but production apps also need routing, data fetching, SEO-friendly rendering, image optimization, and a deployment pipeline. Historically, teams assembled these pieces themselves using React Router, a custom Express server, and a bundler like Webpack configured by hand. Next.js bundles all of that into a single, opinionated framework.

Because Vercel maintains both Next.js and a hosting platform built for it, new rendering features (like streaming and Server Actions) tend to ship in Next.js first and are supported at the infrastructure level from day one.

File-based routing removes the need to hand-configure a router.
Server Components let you fetch data and render HTML without shipping that logic to the browser.
Built-in image, font, and script optimization improve Core Web Vitals with minimal setup.
First-class support for SSR, SSG, and ISR lets you choose the right rendering strategy per route.

App Router vs. Pages Router (Preview)

Next.js currently ships two routing systems side by side. The Pages Router (pages/) was the original system and is still fully supported for existing projects. The App Router (app/) is the newer, recommended system built around React Server Components, nested layouts, and streaming.

This course teaches the App Router as the primary approach, since it is what Vercel recommends for new projects, but a dedicated lesson later covers the Pages Router so you can read and maintain legacy codebases.

Aspect	App Router (`app/`)	Pages Router (`pages/`)
Default component type	Server Component	Client-rendered by default
Data fetching	`async`/`await` in components	`getServerSideProps`/`getStaticProps`
Layouts	Native, nested `layout.tsx`	Manual, via `_app.tsx`
Status	Actively developed, recommended	Stable, maintained

Common Mistakes

Assuming Next.js replaces React entirely, rather than being built on top of it.
Mixing App Router and Pages Router conventions inside the same route by accident.
Skipping the official documentation and relying only on outdated blog posts from the Pages Router era.
Expecting every component to behave like a Client Component when App Router defaults to Server Components.

Key Takeaways

Next.js is a React framework that adds routing, rendering, and production tooling.
The App Router (app/) is the recommended routing system, built on React Server Components.
The Pages Router (pages/) still works and is common in existing production codebases.
Next.js is maintained by Vercel, which also provides first-class hosting for it.
This course focuses on the App Router while still covering the Pages Router for completeness.

Pro Tip

When reading Next.js blog posts or Stack Overflow answers, check whether the example uses getServerSideProps (Pages Router) or an async Server Component (App Router) — mixing the two mental models is the most common source of confusion for newcomers.