App Router vs Pages Router

Destructuring the children Prop

Defining a Page Title with Metadata

Naming a Special File

Hooks Need a Client Component

Root Layout Requires html and body

Folders Define Route Segments

Next.js Handles Rendering For You

App Router vs Pages Router Data Fetching

Route Groups Use Parentheses

Importing the Link Component

Placement of 'use client'

Nested Layout Must Render Children

page.js Needs a Default Export

Where App Router Routes Live

Scaffolding a New Project

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