Introduction to Next.js

Next.js is a React framework that enables server-side rendering, static site generation, and full-stack development. It extends React with powerful features like file-based routing, API routes, image optimization, and built-in CSS support.

Next.js is used by thousands of companies including Netflix, GitHub, Twitch, and Hulu.

Example

# Create a Next.js app
npx create-next-app@latest my-app
cd my-app
npm run dev

# Project structure
my-app/
├── app/              # App Router (Next.js 13+)
│   ├── layout.tsx    # Root layout
│   ├── page.tsx      # Home page
│   └── about/
│       └── page.tsx  # /about route
├── public/           # Static files
├── components/       # Shared components
└── next.config.js    # Configuration

HTML

Full Editor

Related Resources

Next.js Reference

Complete tag & property list

Next.js How-To Guides

Step-by-step practical guides

Next.js Exercises

Practice what you've learned