---
tags:
  - nextjs
  - react
  - frontend
  - web-development
created: 2026-06-05
updated: 2026-06-05
category: Documentation
---

# Next.js: The Complete Guide

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

## 1. Key Features

### 🚀 Routing
Next.js uses a file-system based router.
- **App Router (Recommended):** Uses the `app` directory. Supports Shared Layouts, Nested Routing, Loading States, and Error Handling.
- **Pages Router:** The legacy router using the `pages` directory.

### 🌓 Rendering Strategies
- **Server-Side Rendering (SSR):** Generates HTML on each request. Use `getServerSideProps` (Pages Router) or Server Components (App Router).
- **Static Site Generation (SSG):** Generates HTML at build time. High performance, great for SEO.
- **Incremental Static Regeneration (ISR):** Allows you to update static content after you've built your site, without needing to rebuild the entire site.
- **Client-Side Rendering (CSR):** Standard React rendering in the browser.

### ⚛️ Server vs. Client Components
In the App Router:
- **Server Components (Default):** Render on the server. They don't send JS to the client, reducing bundle size. Good for data fetching and SEO.
- **Client Components:** Use the `'use client'` directive. Necessary for interactivity (hooks like `useState`, `useEffect`) and browser APIs.

### 📥 Data Fetching
Next.js extends the native `fetch` API to provide per-request caching and revalidation.
- **Server-side fetching:** Fetch data directly in Server Components using `async/await`.
- **Route Handlers:** Create custom request handlers for your API (like `GET`, `POST`).

### 🎨 Styling
- **CSS Modules:** Locally scoped CSS to avoid naming conflicts.
- **Tailwind CSS:** Built-in support for the utility-first CSS framework.
- **CSS-in-JS:** Support for libraries like `styled-components` or `emotion`.

### ⚡ Optimizations
- **Image Component (`next/image`):** Automatic image optimization, lazy loading, and WebP support.
- **Font Optimization (`next/font`):** Automatically optimizes and loads custom fonts.
- **Script Optimization (`next/script`):** Controls how third-party scripts are loaded.

## 2. Project Structure (App Router)

```text
├── app/
│   ├── layout.tsx      # Root Layout (required)
│   ├── page.tsx        # Homepage
│   ├── globals.css     # Global styles
│   └── (routes)/       # Folder-based routing
│       ├── about/
│       │   └── page.tsx
│       └── blog/
│           ├── page.tsx
│           └── [slug]/ # Dynamic routes
│               └── page.tsx
├── public/             # Static assets (images, icons)
├── next.config.js      # Configuration for Next.js
├── package.json        # Dependencies and scripts
└── tsconfig.json       # TypeScript configuration
```

## 3. Deployment
The creators of Next.js, **Vercel**, provide the easiest way to deploy Next.js applications with zero configuration. It can also be self-hosted using Node.js or Docker.

---
*Generated by Gemini CLI on 2026-06-05*