EN
Log in Create an account

What Is Next.js and Why Do Businesses Choose It Over WordPress?

What is Next.js? We explain it in plain language: how it differs from React, how it renders pages, why businesses choose it over WordPress, when it is a bad idea, and what hosting it requires.

Grzegorz Kalmus ·

Next.js comes up in almost every conversation about a new company website today. Agencies propose it instead of WordPress, developers talk about “server-side rendering,” and suddenly you have to look for “Node.js support” in hosting offers. In this guide, we explain in plain English what Next.js is, how it works, what it is suitable for, what it is not, and what it requires from your server. No jargon where it can be avoided.

If you are weighing a specific choice between two technologies, we have a separate comparison: WordPress or Next.js for a company website. Here, we focus on Next.js itself.

Table of contents

  1. What is Next.js in one sentence?
  2. How does Next.js differ from React itself?
  3. How does Next.js render pages? Four rendering modes
  4. What else does Next.js come with?
  5. Why do companies choose Next.js over WordPress?
  6. When is Next.js a bad idea?
  7. What hosting does Next.js need?
  8. Vercel or your own server?
  9. How to run Next.js on Saplo step by step?
  10. FAQ

What is Next.js in one sentence?

Next.js is a free framework for building websites and web applications, based on the React library, that can prepare the final HTML on the server before the page reaches the browser.

Vercel develops it, the code is open source (MIT license), and the first version was released in 2016. Today, it is one of the most popular ways to build websites with JavaScript. On Saplo, we install version 16.

A framework is a set of ready-made solutions and conventions that developers build their own code into. You do not have to reinvent routing, data loading, image optimization, or production builds every time. Next.js provides all of this in one package.

Important for non-technical users: Next.js is not a content management system like WordPress. There is no panel where you can click “Add a post”. It is a developer tool. Content comes from files, a database, or a separate CMS (more on that below).

How Does Next.js Differ from React Itself?

React is a library for building user interfaces: buttons, forms, lists, entire views. On its own, however, it does not answer the questions that come up when building a real website:

  • how to organize subpages and URLs,
  • where and when to fetch data,
  • how to make sure Google sees the content instead of a blank screen,
  • how to build and launch a production version.

A classic React app (a so-called SPA) sends the browser an almost empty HTML file and a JavaScript bundle. The browser then assembles the page. For users, this means a white screen for a fraction of a second, or longer on a slow phone. For search engines, it means extra work, because the content appears only after the scripts have run.

Next.js takes React and adds a server-side layer to it. The page arrives in the browser already populated with content, while interactive elements "come alive" shortly afterward. This is why Next.js is so popular in projects where SEO and the speed of the initial rendering matter.

How Does Next.js Render Pages? Four Rendering Modes

This is the most important thing to understand, as it also determines your choice of hosting. Next.js lets each subpage choose a different rendering method.

Mode When HTML is generated Best for
Static page (SSG) Once, during the project build Homepage, "About us", offer, blog posts
Server-side rendering (SSR) On every visit Shopping cart, customer dashboard, search results
Incremental static regeneration (ISR) Once, then at set intervals in the background Product catalog, price list, news
Client-side rendering (CSR) Only on the user's device Charts, editors, sections behind the login

In practice, a single company website combines these modes. The company description is static and loads instantly. The product list refreshes every few minutes. The customer dashboard is rendered on demand because everyone sees different content.

From version 13, Next.js also has the so-called App Router and Server Components: components that run exclusively on the server and do not send their code to the browser. Less JavaScript on the user's device means a faster page, especially on mobile phones.

What else does Next.js include?

Besides rendering, the framework solves several common problems that you would otherwise have to build yourself in plain React:

  • File-based routing. The app/oferta/page.js directory automatically becomes the /oferta route. No configuration required.
  • Image optimization. The next/image component automatically resizes images, serves modern formats, and loads them only when they appear on the screen.
  • Custom APIs. You can write endpoints in the same project, for example, for a contact form or payment webhook. You do not need a separate backend.
  • SEO metadata. Titles, descriptions, Open Graph tags, and the sitemap are configured in the code, on a per-page basis.
  • Fonts and scripts. Built-in mechanisms load fonts without causing text to "jump" and defer external scripts.
  • Fast builds. In version 16, the default build tool is Turbopack, which is significantly faster than the previous Webpack.

Why do companies choose Next.js over WordPress?

Four arguments come up most often.

1. Speed without installing plugins. WordPress starts PHP and queries the database on every request, unless a cache is set up. In Next.js, a static page is a prebuilt file. It's easier to achieve good results in PageSpeed and Core Web Vitals. We explained what makes WordPress slow in the article Why is WordPress slow? 9 causes.

2. A smaller attack surface. There is no admin panel /wp-admin for bots to attack every day, nor dozens of plugins from different authors. A static site is practically impossible to hack.

3. Design freedom. The site is not constrained by a theme or a page builder. For brands that want a distinctive look, animations, or an integration with their own system, this makes a big difference.

4. A website and app in one. If you need a configurator, calculator, client dashboard, or store with custom logic alongside your company website, Next.js can handle it all in one project.

The headless model is also becoming more popular: content is created in an easy-to-use dashboard (e.g. Directus, Strapi, or even WordPress used only as the backend), and Next.js displays it. Editors have their own dashboard, while visitors get a fast website. On Saplo, you can run Directus and Next.js side by side in a single Box.

When is Next.js a bad idea?

To be honest, it is not always worth it. Next.js falls short when:

  • a non-technical person needs to edit the content, and the budget does not cover a CMS. Without an admin panel, every text change becomes a job for a developer,
  • you need a common feature “right away”. Reservations, forms, and a store with Polish payment methods and courier integrations are available in WordPress as ready-made plugins. In Next.js, this usually means developer work,
  • you have no one to ask for changes. Many people can handle WordPress, but far fewer can work with React code,
  • the site is a simple business card with no ambitions. In that case, the difference in speed will not compensate for the higher development cost.

A simple online store is still the fastest to launch on an off-the-shelf platform. We explained this in What is WooCommerce.

What kind of hosting does Next.js need?

This surprises a lot of people. Next.js is a Node.js application, not a set of PHP files. This leads to two scenarios:

Fully static version (output: 'export'). Next.js generates ready-to-use HTML, CSS, and JS files. Any file server will do, even basic hosting. However, you lose SSR, ISR, your own API, and server-side image optimization.

Full version. You need a Node.js process running in the background that handles requests. You also need a web server in front of it (e.g. nginx), an SSL certificate, and something that will restart the process after a failure or machine restart. Classic shared PHP hosting usually doesn't make this possible.

The minimum requirements are modest. In our Next.js setup, we assumed 512 MB of RAM and 2 GB of disk space for one application. More memory is useful when building (npm run build) larger projects, because that's when usage is highest.

Vercel or your own server?

Vercel, the creator of Next.js, offers its own hosting platform, and that is where the framework works “most naturally”. However, there are two things worth knowing:

  • The free Hobby plan is intended for non-commercial use. A company website should use a paid plan, billed for each team member.
  • With higher traffic, charges for data transfer, function calls, and image optimization are added, so the bill grows along with the site's popularity.

Your own server or container provides a fixed, predictable cost and full control over your data (servers in the EU). In return, someone has to take care of Node.js, nginx, SSL, and automatic restarts. We leave the detailed cost breakdown for a separate article, but the principle is simple: the greater the traffic and team, the more worthwhile a fixed subscription becomes.

How to run Next.js on Saplo step by step?

On Saplo, Next.js is available as a ready-to-use app in the App catalog. You do not need to configure a server: the Node.js process runs under supervision (it restarts automatically after a crash), nginx routes traffic to it, and an SSL certificate is issued automatically.

Step 1. Choose a plan. A single Next.js site will fit on Box S (1 GB RAM, 15 GB SSD, $29 per year). If you want to work via SSH or build larger projects, choose Box M (2 GB RAM, 30 GB SSD, $69 per year), which includes SSH access. The first-year price is the same as the renewal price. Apps and domains are unlimited on every plan. Compare plans in Price.

Step 2. Add the app. In the panel, select Next.js from the App catalog. If you do not have any code yet, Saplo will set up a starter project (create-next-app), build it and launch it, so you will immediately see a working site.

Step 3. Connect your domain. To get started, you receive a subdomain *.saploapp.pl with SSL. You can add your own domain in the panel and set the DNS records by following the provided instructions.

Step 4. Upload your own code via Git. Generate a configuration file using the saplo init command, add it to the repository, and connect the GitHub repository in the application details (the “Saplo Deploy” application). From then on, every git push to the production branch (main by default) automatically triggers npm install, the build and a restart. This usually takes 1 to 3 minutes, and the result appears as a green or red dot next to the commit on GitHub. See Git Deploy Documentation.

Step 5. Environment variables. Set API keys, database addresses and secrets in the panel as environment variables, rather than in your repository code.

Already have a Next.js site on Vercel or another server? Migration to Saplo is included with every plan.

FAQ

Is Next.js free?

Yes. Next.js is open-source software under the MIT license and can be used commercially at no cost. You only pay for the hosting where the site runs.

Is Next.js good for SEO?

Yes, it is one of its main advantages. Thanks to server-side or build-time HTML generation, search engines immediately receive the full content, while fast loading helps improve Core Web Vitals. However, the framework itself will not replace good content and proper metadata.

Do I need to know React to use Next.js?

Yes, if you're building a website, because Next.js is React with extras. Not if you're using a ready-made website: when content comes from the CMS panel, the editorial team doesn't touch the code.

Will Next.js work on regular shared hosting?

Only as a static export, without server-side rendering, ISR, or a custom API. The full version requires a running Node.js process, meaning a server, a container, or a platform that runs it. On Saplo, every Box is a separate container where Next.js runs in its full version.

How much RAM does Next.js need?

A small or medium-sized site runs on around 512 MB of memory. Building the project consumes the most resources, so for large applications, it is worth having some extra capacity, for example Box M with 2 GB of RAM.

  • #Next.js
  • #What is
  • #Hosting
  • #Guides
  • #React