# Next.js

Next.js is an open-source React framework, created and maintained by Vercel, for building websites and web applications. It adds routing, server rendering, and data loading to React, so pages can be fast, readable by search engines, and full-featured.

Also called: NextJS, Next, React framework, Next.js App Router.

## In short

- Next.js is a **framework built on React** that handles routing, rendering, and data loading.
- It can render pages on the server or ahead of time, which helps speed and search visibility.
- One project can hold a marketing site and a web app, along with the server code behind them.
- It is open source and can run on Vercel, other cloud platforms, or your own servers.

## What Next.js adds to React

React is a library for building interfaces out of components. On its own, it leaves many decisions open: how pages map to URLs, how data is fetched, how pages get to the browser quickly. Next.js, first released in 2016, makes those decisions in a consistent way so a team can start building the product instead of the plumbing.

**Diagram: What Next.js provides on top of React.**

Next.js (A framework around React) feeds:
- Routing (Folders become URLs)
- Rendering (Server, static, or in the browser)
- Data loading (Fetch on the server, cache results)
- Server code (Forms, APIs, and secrets)
- Performance (Images, fonts, code splitting)

_Each of these can be assembled by hand around React. Next.js provides them together, already working with each other._

## How rendering works

The most important choice Next.js offers is where and when each page is turned into HTML. Since version 13, its App Router is built on React Server Components, which run on the server and send finished HTML, with JavaScript added only where a page needs interaction.

| Approach | When HTML is made | Good for |
| --- | --- | --- |
| Static | Once, when the site is built | Marketing pages, docs, blog posts |
| Server rendered | On each request | Personalized pages, dashboards |
| Revalidated | Ahead of time, refreshed on a schedule or on demand | Catalogs and content that change sometimes |
| Client rendered | In the browser, after load | Highly interactive parts of a page |

Sending ready HTML helps people and machines. Pages appear sooner, which improves [Core Web Vitals](https://www.choie.co/glossary/core-web-vitals), and search engines and AI crawlers can read the content without running JavaScript, which supports [answer engine optimization](https://www.choie.co/glossary/answer-engine-optimization).

## When Next.js is a good choice

- **A site that must be found.** Marketing sites, content, and landing pages benefit from server-rendered HTML.
- **A web app with a public face.** The marketing site and the signed-in product can live in one project and share components.
- **A React team.** Developers who know React can be productive quickly, and the ecosystem is large.
- **Content from a CMS.** It pairs well with a [headless CMS](https://www.choie.co/glossary/headless-cms) for editable pages.

It is less necessary for an internal tool that sits behind a login and never needs search traffic, where a simpler single-page React setup can be enough. For mobile apps, teams often pair a Next.js web app with a [React Native](https://www.choie.co/glossary/react-native) app and share types and logic between them.

When Choie scopes a [web app build](https://www.choie.co/services/web-app-development), the written scope says whether a marketing site ships in the same release, since that is one of the things that moves the price.

## Hosting and ownership

Next.js is made by Vercel, and Vercel's platform supports its features with little setup. It is open source under the MIT license, though, and it can also run on other cloud platforms, in a Docker container, or on a plain Node.js server. Some features need more configuration away from Vercel, so it is worth checking which ones your product uses.

> **Keep the accounts in your name.** Whoever builds your site, the hosting account, the domain, and the code repository should belong to your company. Moving later is much easier when you already hold the keys.

The Choie website itself is built with Next.js. For client products, the [tech stack](https://www.choie.co/glossary/tech-stack) is chosen to fit the product, and once the fees for a deliverable are paid the code is the client's. See [who owns the code](https://www.choie.co/guides/who-owns-the-code).

## Common mistakes

- **Making everything client-side.** Marking every component as interactive throws away the speed benefits of server rendering.
- **Following outdated tutorials.** Next.js changes quickly, and older guides use patterns that newer versions replace.
- **Skipping caching decisions.** Not deciding which pages can be static leads to slow pages or stale data.
- **Upgrading rarely.** Falling several major versions behind turns routine updates into projects.

Outdated patterns also come from AI coding tools trained on older versions. The Choie site is built the way client work is: AI drafts code from a decided design, and a senior person reads every line before it ships, which is where an outdated pattern gets caught. See [AI-accelerated development](https://www.choie.co/guides/ai-accelerated-development).

## Common questions

### 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, data loading, and server code, so you can build a complete site or app.

### Is Next.js good for SEO?

Yes. Because it can send fully rendered HTML from the server or ahead of time, search engines and AI crawlers can read pages without running JavaScript, and pages tend to load faster.

### Do I have to host Next.js on Vercel?

No. Next.js is open source and runs on other cloud platforms, in containers, or on your own Node.js server. Vercel offers the simplest setup, and some features need extra configuration elsewhere.

### Can Next.js be used for a SaaS product?

Yes, it is a common choice. One project can hold the marketing pages, the signed-in application, and the server code that connects to the database and other services.

Related: [Tech stack](https://www.choie.co/glossary/tech-stack), [Core Web Vitals](https://www.choie.co/glossary/core-web-vitals), [Custom website](https://www.choie.co/glossary/custom-website), [Headless CMS](https://www.choie.co/glossary/headless-cms), [React Native](https://www.choie.co/glossary/react-native).

HTML: https://www.choie.co/glossary/nextjs