Next.js on the server-side— notes to self

But hopefully useful to others too.

Photo by David Travis on Unsplash

This blog post was last updated to match Next.js version 11, which means that it’s now out of date. Since Next.js version 13, things have changed drastically (hopefully for the better) and so I would advice going straight to the official docs.

What is Next.js?

It’s a framework for building server-side rendered React applications.

Sounds like a frontend thing, right? But actually, Next.js is a framework for building full-stack applications with both frontend and backend parts.

How does the server-side work?

The ‘server-side’ in Next.js applications can be separated into two parts:

1. The server-side rendering — generating HTML on the server-side and sending it to the client
2. The backend — serverless Node.js APIs, or even traditional Node servers

The server-side rendering (pre-rendering)

Pre-rendering = general term for rendering HTML before it is sent to the client

By default, Next.js will pre-render every page, but can do so in two different ways:

1. Static generation