Introduction to Next.js

🔍 What Is It?

Next.js is an open-source full-stack React framework built and maintained by Vercel. It extends React with:

• →File-based routing — your folder structure becomes your URL structure
• →Server-side rendering (SSR) — HTML generated on the server per request
• →Static site generation (SSG) — HTML pre-built at deploy time
• →Incremental static regeneration (ISR) — static pages that refresh in the background
• →API Routes / Route Handlers — backend endpoints inside the same project
• →Built-in optimisations — image compression, font loading, script management
• →App Router — React Server Components, streaming, nested layouts (Next.js 13+)

Next.js is the most widely deployed React framework in enterprise. It solves the problems that plain React leaves unsolved: routing, server rendering, data fetching, and production build optimisation.

🎯 Why Do We Need It?

Plain React is a UI library — it renders components in the browser. That leaves you responsible for:

• →Setting up a router (React Router, TanStack Router)
• →Configuring Webpack / Vite from scratch
• →Solving SEO (React apps ship empty HTML shells — search engines struggle)
• →Building a backend separately (Express, Fastify)
• →Optimising images, fonts, and third-party scripts manually
• →Handling server rendering yourself

Next.js solves every one of these out of the box. It lets a small team ship a production-grade, SEO-friendly, performant full-stack application without a separate backend service.

🏗️ What Happens in Real Projects?

Next.js powers some of the world's largest sites:

• →Vercel (obviously), TikTok, Twitch, GitHub Copilot dashboard
• →Enterprise SaaS dashboards, e-commerce storefronts, marketing sites, internal tools

Typical enterprise use cases:

• →Marketing site with CMS integration (Contentful, Sanity) — SSG + ISR
• →Customer portal with auth — SSR + Route Handlers
• →E-commerce storefront — SSG for product pages, SSR for cart/checkout
• →Internal analytics dashboard — CSR with Server Components for initial data

In a real project, Next.js replaces:

• →React + React Router + Express + separate SSR setup
• →Manual Webpack configuration
• →Separate image CDN setup
• →Manual meta tag management

⚙️ How It Works

The Next.js request lifecycle (App Router):

1. Request hits the server (or CDN edge)
2. Next.js matches the URL to a route segment in the app/ directory
3. Server Components run on the server — fetch data, render HTML
4. The HTML stream is sent to the browser progressively (streaming)
5. Client Components hydrate in the browser — React takes over interactivity
6. Subsequent navigations use client-side routing — no full page reload

Build pipeline:

• →next build compiles TypeScript, bundles JS, pre-renders static pages
• →next start runs the Node.js production server
• →On Vercel, static assets go to CDN, server functions become serverless functions

💻 Example

A Minimal Next.js 14 App — The smallest meaningful Next.js app — a page that fetches data on the server and renders it.

// This runs on the SERVER — no useEffect, no loading state needed
export default async function HomePage() {
  // Direct async/await in a component — only possible in Server Components
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: refresh every hour
  });
  const products = await res.json();

  return (
    <main>
      <h1>Products ({products.length})</h1>
      <ul>
        {products.map((p: { id: string; name: string }) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </main>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits