What is Next.js? The React Framework for Production

What is Next.js?

A React framework built for production. It supports server-side rendering, static site generation and is engineered for performance, scalability and SEO. Maintained by Vercel, it's one of the go-to choices for modern web apps.

• Framework for full-stack React apps
• SSR + SSG support
• Built for performance, scalability and SEO

Why Next.js?

What you get out of the box:

• Built-in (file-based) routing
• Server-side rendering & static site generation
• API routes (backend inside the frontend)
• Image and performance optimization
• Great developer experience
• Fast, SEO-friendly, fullstack-ready

Installation

Create a new Next.js project with one command; create-next-app walks you through App Router, TypeScript, Tailwind and ESLint choices interactively.

npx create-next-app@latest

Project Structure

The modern App Router layout is built on file-based routing. Every folder is a route, layout.tsx is the layout, page.tsx is the route's page.

app/
├── layout.tsx        # shared layout
├── page.tsx          # / page
├── about/
│   └── page.tsx      # /about
└── api/
    └── hello/
        └── route.ts  # /api/hello

App Router (IMPORTANT)

The new routing system introduced in Next.js 13. It defaults to React Server Components and offers built-in support for layouts, loading states and streaming.

• New routing system in Next.js
• Uses React Server Components by default
• Supports layouts, loading and streaming
• Nested routes for piece-by-piece UI

"use client";
// this file is now a Client Component

Server vs Client Components

In the App Router, components are Server Components by default. Add the 'use client' directive at the top of a file to make it a Client Component.

• Server Component: renders on the server, faster, no browser JS
• Client Component: runs in the browser, can use useState/useEffect
• The two compose freely

Rendering Strategies

Next.js offers four rendering strategies — pick at the page level.

• SSR — render on the server per request
• SSG — render at build time, ship static HTML
• ISR — SSG + background revalidation
• CSR — render on the client only

Data Fetching (App Router)

Server Components can be async — you await your data directly. fetch handles caching automatically.

export default async function Posts() {
  const res = await fetch("https://api.example.com");
  const data = await res.json();
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

API Routes

Write backend endpoints inside your app via route.ts files. Export GET, POST, PUT, PATCH, DELETE to handle HTTP verbs.

export async function GET() {
  return Response.json({ message: "Hello API" });
}

Key Features

Production-ready capabilities Next.js packages together:

• File-based routing
• Server Components
• Built-in API routes
• Image optimization (next/image)
• Automatic code splitting
• Built-in TypeScript support

Next.js vs React

They serve different goals:

• Next.js: fullstack framework — SSR, SSG, SEO, production-ready
• React: just a UI library — you set up everything else
• Beginners increasingly start with Next.js

Use Cases

Where Next.js gets used most:

• SEO-driven marketing sites
• E-commerce platforms
• SaaS dashboards
• Blogs and content platforms
• Full-stack web apps

Summary

Next.js combines frontend and backend, improves performance and SEO, and ships with production-ready defaults. It sits at the top of the list of React framework choices for modern, fast and scalable web apps.