Self-hosting with Node.js in NextJS - Step-by-Step Execution

Concept Flow - Self-hosting with Node.js

Write Next.js app

↓

Build app with next build

↓

Start Node.js server with next start

↓

Server listens on port

↓

Browser sends request

↓

Node.js server handles request

↓

Render page and send response

↓

Browser displays page

This flow shows how you build and run a Next.js app using Node.js to serve pages to browsers.

Execution Sample

NextJS

import next from 'next';
import http from 'http';

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  http.createServer((req, res) => handle(req, res)).listen(3000);
});

This code creates a Node.js server that runs a built Next.js app and listens on port 3000.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Import next and http modules	No app or server	Modules loaded	Ready to create app and server
2	Create Next.js app instance with dev:false	No app instance	App instance created	App ready for production mode
3	Get request handler from app	No handler	Handler function ready	Can handle HTTP requests
4	Call app.prepare()	App not prepared	App prepared	Build assets ready to serve
5	Create HTTP server with handler	No server	Server created	Server ready to listen
6	Server listens on port 3000	Server created	Server listening	Waiting for browser requests
7	Browser sends HTTP request	Server listening	Request received	Server processes request
8	Handler processes request	Request received	Response generated	Page HTML ready
9	Server sends response	Response generated	Response sent	Browser receives page
10	Browser renders page	Response received	Page displayed	User sees website
11	No more requests	Server listening	Idle	Waiting for next request

💡 Server runs continuously until stopped; no exit unless manually terminated.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 6	After Step 9
app	undefined	Next.js app instance	Prepared app	Prepared app	Prepared app	Prepared app
handle	undefined	Handler function	Handler function	Handler function	Handler function	Handler function
server	undefined	undefined	undefined	HTTP server created	Server listening	Server listening

Key Moments - 3 Insights

Why do we call app.prepare() before starting the server?

app.prepare() builds and prepares the Next.js app assets so the server can serve pages correctly. See execution_table step 4.

What does the handler function do when the server receives a request?

The handler processes the HTTP request and generates the correct page response. See execution_table steps 7 and 8.

Does the server stop after sending one page?

No, the server keeps listening for more requests until manually stopped. See execution_table step 11.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of the server after step 6?

A Server listening on port 3000

B Server not created yet

C Server stopped

D Server preparing app

💡 Hint

Check the 'State After' column for step 6 in execution_table.

At which step does the Next.js app finish preparing and is ready to serve pages?

A Step 7

B Step 2

C Step 4

D Step 9

💡 Hint

Look for app.prepare() completion in execution_table.

If we skip calling app.prepare(), what will happen when the server tries to handle requests?

A Server will still serve pages normally

B Pages may not load correctly because assets are not ready

C Server will crash immediately

D Server will listen on a different port

💡 Hint

Consider the role of app.prepare() in execution_table step 4.

Concept Snapshot

Self-hosting Next.js with Node.js:
1. Build your Next.js app with 'next build'.
2. Create a Node.js server using 'next' and 'http' modules.
3. Call app.prepare() to ready assets.
4. Start server with http.createServer and listen on a port.
5. Server handles browser requests and serves pages.
6. Server runs continuously until stopped.

Full Transcript

This visual execution trace shows how to self-host a Next.js app using Node.js. First, you write your Next.js app code. Then you build it using 'next build'. Next, you create a Node.js server by importing 'next' and 'http' modules. You create a Next.js app instance with production mode off, then get the request handler. You call app.prepare() to prepare the app assets. After that, you create an HTTP server that uses the handler to process requests. The server listens on port 3000. When a browser sends a request, the server receives it, the handler processes it, and the server sends back the rendered page. The browser then displays the page. The server keeps running and waiting for more requests until you stop it manually. Key points include calling app.prepare() before starting the server to ensure assets are ready, and understanding that the handler function processes each incoming request. This setup allows you to serve your Next.js app yourself using Node.js.