What Is Next.js and When Should You Use It?

Next.js is a React framework for building full-stack web applications. You build the interface with React components, and Next.js supplies the parts React leaves out: routing, server-side rendering, data fetching, API endpoints, and a configured build tool. The current release targets React 19 and the App Router, which is the default way to structure a Next.js project.

A page in the App Router is just a file in the right folder. Create a file named app/page.tsx and give it this content:

App.tsx

// app/page.tsx
export default function HomePage() {
  return <h1>Hello from Next.js</h1>;
}

Start the dev server and open http://localhost:3000 in a browser. The heading appears, and you did not configure routing, a bundler, or a server by hand. That single file is the whole wiring.

What Next.js adds on top of React

React is a library for the view layer. Next.js wraps it in a framework that answers the questions React leaves open:

• Routing. Folders and files inside the app directory define the URLs, so there is no router package to install and configure.
• Server rendering. Pages can be rendered on the server, which ships a faster first paint and makes content readable before JavaScript loads.
• Data fetching. Server components can query a database or call an API directly, keeping credentials and query logic off the client.
• API endpoints. Route handlers and server actions let you build a backend inside the same project instead of running a separate server.
• Optimization. Built-in components for images, fonts, and third-party scripts handle sizing, lazy loading, and caching.
• Build tooling. Turbopack is the default bundler, so you get a working compile step without a separate bundler config.

These features arrive wired together, which is the main reason teams pick a framework over assembling a router, a bundler, and a server themselves.

When to use Next.js

Reach for Next.js when a project needs several of these features together. The framework saves the most time when routing, server rendering, and an API would otherwise have to be assembled from separate tools.

Plain React remains the right call for a single interactive widget or a client-only single-page app. You do not need a framework until server rendering, routing, or a backend enter the picture.

How Next.js relates to React and Vercel

Three names get mixed up constantly. React is the component library, Next.js is the framework built on top of it, and Vercel is a hosting company rather than a requirement.

This split matters because some Next.js features behave differently depending on where you deploy. Caching, image optimization, and incremental revalidation are handled by the platform, so a self-hosted app and a Vercel app can show different behavior for the same code. Keep framework behavior and platform behavior separate when you debug.

If you already know React and want a side-by-side list of what the framework adds, read Next.js vs React: What the Framework Actually Adds. When you are ready to start a project, create a new Next.js app and follow the generated structure.