App Router vs Pages Router

Naming a Special File

Destructuring the children Prop

Scaffolding a New Project

Where App Router Routes Live

page.js Needs a Default Export

Nested Layout Must Render Children

Placement of 'use client'

Importing the Link Component

Route Groups Use Parentheses

App Router vs Pages Router Data Fetching

Next.js Handles Rendering For You

Folders Define Route Segments

Root Layout Requires html and body

Hooks Need a Client Component

Defining a Page Title with Metadata

Next.js Project Folder Structure

Creating a Project with create-next-app

Why Developers Choose Next.js

What Next.js Is and Its Relationship to React

Navigating with the Link Component

The Root Layout Requirement

Nested Routes via Folder Structure

The layout.js File and Shared Layouts

The page.js File and Routes

File-Based Routing in the App Directory

Running the Next.js Dev Server

Key Benefits of Next.js

File-Based Routing Basics

Server Components by Default

The layout File

The page File

The App Directory

What Next.js Is

App Router vs Pages Router

Root Layout Requirement

Default Project Files

Running the Dev Server

Creating a Next.js Project

What Next.js Is

The Root Layout

The layout.js File

App Router vs Pages Router

Creating a Project

Special Files Overview

Benefits Over Plain React

Running the Dev Server

Nested Routes

The app Directory

Project Folder Structure

Server Components by Default

The page.js File

File-Based Routing