Next.js

Pronunciation: NEKST jay-ES

Updated October 3, 20262 min read

In short

Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.

What is Next.js?

Next.js was released in 2016 by the company now called Vercel, to fill the gaps React leaves open. React renders components, but a real site also needs pages and URLs, data loading, server rendering for speed and search engines, and a build setup. Next.js provides all of these with sensible defaults, so a new project starts with one command.

Routing is based on files: in the App Router, a folder such as app/blog/[slug] with a page.tsx file becomes the page at /blog/some-post. Components are React Server Components by default, which run on the server, can read a database directly and send only HTML to the browser; components that need interactivity are marked with "use client".

Each page can be rendered in the way that suits it: generated once at build time (SSG), rendered on every request (SSR), or regenerated in the background after a set time. Route handlers and server actions let the same project serve APIs and handle form submissions, and the framework also optimizes images, fonts and scripts.

A common misconception is that Next.js only runs on Vercel. It is open source and runs on any Node.js server, in a Docker container or as a static export for many sites, although some features fit Vercel's platform most naturally. It is not a replacement for React either; it is built on top of it.

Key takeaways

Next.js is a React framework for full web applications.
Folders and files in the app directory define the routes.
Server Components run on the server; client components add interactivity.
Pages can be static (SSG), rendered per request (SSR) or regenerated over time.
It is open source and runs on any Node.js host, not only on Vercel.

Example

A page that loads data on the server (app/posts/page.tsx)tsx

// A Server Component: runs on the server, sends only HTML
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts");
  const posts: { id: number; title: string }[] = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Readers ask

What is the difference between React and Next.js?

React is a library for building user interfaces from components. Next.js is a framework built on React that adds routing, server rendering, static generation, data loading and a build setup.

Is Next.js frontend or backend?

Both. It renders the user interface, but its Server Components, route handlers and server actions run on the server, so one Next.js project can contain the frontend and the backend logic.

Do you need Vercel to use Next.js?

No. Next.js is open source and can run on any server that runs Node.js, in Docker, or as a static export. Vercel, the company behind it, offers hosting that supports its features out of the box.

Often compared

Next.js vs ReactReact is a library for building UIs from components, while Next.js is a React framework that adds routing, server-side rendering and static generation.