Next.js is a React framework for building production web applications. Created by Vercel, it adds routing, server rendering, data fetching, and deployment tooling on top of React.

Why Next.js?

React excels at UI, but leaves many decisions to you — routing, data loading, SEO, and deployment. Next.js provides opinionated defaults so you can ship faster.

Feature Benefit
File-based routing No router config — folders become URLs
Server Components Fetch data on the server, send less JavaScript
SSR / SSG / ISR Flexible rendering for SEO and performance
API routes Backend endpoints in the same project
Image optimization Automatic resizing and lazy loading
Zero-config deployment Deploy to Vercel in minutes

Next.js vs Plain React

Create React App / Vite (client-only):

  // All rendering happens in the browser
function App() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        fetch('/api/posts').then(r => r.json()).then(setPosts);
    }, []);
    return <PostList posts={posts} />;
}

Next.js (server-first):

  // Data fetched on the server before HTML is sent
async function Page() {
    const posts = await fetch('https://api.example.com/posts').then(r => r.json());
    return <PostList posts={posts} />;
}

The server component runs on the server — users receive HTML with content already rendered.

Core Concepts 

  Request → Next.js Server → React Server Components → HTML + minimal JS → Browser
Concept Description
App Router Modern routing in the app/ directory
Server Components Default components that run on the server
Client Components Interactive components marked with 'use client'
Route Handlers API endpoints at app/api/*/route.ts
Layouts Shared UI that persists across navigation

When to Use Next.js

Good fit:

  • Marketing sites and blogs that need SEO
  • E-commerce and dashboards with mixed static/dynamic content
  • Full-stack apps where frontend and API live together
  • Teams already using React who want production defaults

Consider alternatives when:

  • Simple static sites with no interactivity — Astro or Hugo may be lighter
  • Mobile apps — React Native or Expo
  • Highly interactive SPAs with no SEO needs — Vite + React may suffice

The Next.js Ecosystem

  • Vercel — creators of Next.js; optimized hosting platform
  • Auth.js — authentication library built for Next.js
  • Tailwind CSS — popular styling choice in Next.js projects
  • Prisma / Drizzle — database ORMs commonly paired with Next.js
  • tRPC — end-to-end type-safe APIs

Prerequisites

Complete these before starting:

Next: create your first Next.js project with create-next-app.