Next.js

React builds interfaces; Next.js turns React into a full website. It decides how web addresses map to pages, lets each page be rendered on the server, built ahead of time or built in the browser, and lets developers write small server functions next to the pages that use them.

Next.js is not a CMS and has no editing screens of its own. Content usually comes from files in the project or from a headless CMS. It is also not tied to one host: Vercel offers hosting designed for it, but it can run on other platforms and servers, with some features depending on the host.

How it works

Pages are organised as folders and files, and the folder structure becomes the site's addresses, so a folder named services produces a services page. For each page, developers choose how it is produced: built once ahead of time as static HTML, rendered on the server on every request, or regenerated in the background at intervals.

Because pages can be rendered on the server, visitors and crawlers receive complete HTML rather than an empty shell waiting for JavaScript. React then takes over in the browser to make the page interactive. This combination aims to give the speed and search visibility of a traditional site with the interactivity of an app.

Next.js also handles images, fonts and code splitting, so each page only loads the code it needs, and it supports server functions for things like handling a form or talking to a database. Hosting matters here: static pages can be served from almost anywhere, while server rendering and server functions need a platform that can run server code, usually Node.js.

Example

A clinic's site is built in Next.js with treatment pages pulled from a headless CMS. The treatment pages are generated ahead of time and refreshed when an editor publishes a change, so they load quickly from a CDN. The appointment request form posts to a server function that checks the input and emails the practice.

Later the clinic moves to cheaper shared hosting that cannot run Node.js. The developer exports the site as static HTML, which works for every treatment page, but pages no longer refresh on their own when an editor publishes, so each change now triggers a rebuild and upload, and the form's server function no longer runs, so it is switched to a third-party form service. Knowing which features need a server avoided a surprise on launch day. The same check is worth doing before any move: list the parts of the site that run code on each request, such as forms, search, logins or personalised pages, and confirm the new host supports each one.

Why it matters for your business

Next.js gives a capable team a fast, search-friendly site that can grow into an app, and it is widely used, so developers are not hard to find. The trade-offs are complexity and running cost. It needs a developer for most changes beyond content, hosting that suits its features, and regular updates as the framework moves quickly. For a small site whose content rarely changes, a CMS or a simpler static site may be cheaper to own. Ask how editors will change content and what hosting the build assumes.

Common mistakes

• Choosing Next.js for a simple brochure site and leaving staff unable to edit content without a developer.
• Assuming every hosting plan can run it, then discovering server features need a platform that runs server code.
• Rendering every page on every request when most could be generated ahead of time and served faster.
• Falling several major versions behind, so security fixes require a larger upgrade.

Questions people ask

Do I have to host Next.js on Vercel?

No. Vercel builds Next.js and offers hosting tailored to it, but Next.js can run on other cloud platforms, on your own Node.js server or, for fully static sites, on almost any host. Some features behave differently or need extra setup away from Vercel.

What is the difference between React and Next.js?

React is a library for building interface components. Next.js is a framework that uses React and adds routing, server rendering, static generation, image handling and server functions. You can use React without Next.js, but Next.js always uses React.

Is Next.js good for SEO?

It can be very good, because pages can be delivered to search engines as complete HTML, either generated ahead of time or rendered on the server. Results still depend on content, titles, internal links and speed, which the framework does not write for you.