JavaScript // Framework

NEXT.JS

The React Framework for the Web. Next.js handles the configuration, routing, and backend integration so developers can focus on building. It creates a seamless hybrid between the server and the browser.

The Hybrid Web

React is a UI library. Next.js is a **Framework**. It adds the missing pieces: File-system Routing, API Routes, and Image Optimization. It allows you to choose *per page* whether to render on the server or the client.

File-System Routing

Create a file in /app, and it becomes a URL automatically.

Server Components

Render React components on the server for zero client-side JS.

API Routes

Build backend endpoints (Node.js) directly alongside your frontend.

Image Optimization

Automatically resize and serve modern image formats (WebP/AVIF).

The Vercel Ecosystem

Built by Vercel to run optimally on the Edge. While open source, Next.js is designed to deploy globally in seconds.

Rendering Engine

Build TimeRequest TimeBrowser
Build
Server
Client

Static Site Generation

HTML generated at build time. Served instantly via CDN.

HTML GenerationBuild Time
Time to First ByteInstant
SEO FriendlyPerfect
// Next.js Function
export function getStaticProps()

App Router Structure

app/
layout.tsx // Root UI
page.tsx // Home Route (/)
dashboard/
page.tsx // /dashboard
loading.tsx // Spinner