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.

Practice

1. What does self-hosting a Next.js app with Node.js mean?

easy

A. Running Next.js only in the browser without Node.js

B. Using a third-party service to host your Next.js app

C. Building the app without a server

D. Running your Next.js app on your own server using Node.js

Solution

1. Step 1: Understand self-hosting concept

   Self-hosting means you run the app on your own server, not a third-party service.

2. Step 2: Connect self-hosting with Node.js

   Next.js apps use Node.js to serve the app on your server, giving you control.

3. Final Answer:

   Running your Next.js app on your own server using Node.js -> Option D

4. Quick Check:

   Self-hosting = Running on own server [OK]

Hint: Self-hosting means running on your own server [OK]

Common Mistakes:

• Confusing self-hosting with using cloud services
• Thinking Next.js runs only in the browser
• Believing no server is needed for Next.js

2. Which command correctly starts a Next.js app in production mode with Node.js?

easy

A. next start

B. node next

C. next dev

D. npm run build

Solution

1. Step 1: Identify production start command

   After building, next start runs the app in production mode with Node.js.

2. Step 2: Check other commands

   next dev is for development, npm run build builds but doesn't start, node next is invalid.

3. Final Answer:

   next start -> Option A

4. Quick Check:

   Production start = next start [OK]

Hint: Use 'next start' to run production server [OK]

Common Mistakes:

• Using 'next dev' for production
• Trying to run 'node next' directly
• Confusing build and start commands

3. Given this Node.js server code for Next.js, what will happen when you run it?

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, () => {
    console.log('Server running on http://localhost:3000');
  });
});

medium

A. Throws an error because 'next' cannot be imported this way

B. Starts a Next.js server on port 3000 serving production build

C. Starts a development server with hot reload

D. Server runs but does not handle Next.js requests

Solution

1. Step 1: Analyze server setup

   The code imports Next.js, sets dev to false (production), prepares app, then creates an HTTP server that uses Next.js request handler.

2. Step 2: Understand server behavior

   The server listens on port 3000 and serves the production Next.js app correctly.

3. Final Answer:

   Starts a Next.js server on port 3000 serving production build -> Option B

4. Quick Check:

   Node.js server with Next.js handler = production server [OK]

Hint: dev: false means production server starts [OK]

Common Mistakes:

• Thinking import syntax is invalid in Node.js
• Assuming dev: false means development mode
• Believing server does not handle Next.js requests

4. You wrote this code to self-host your Next.js app but get no confirmation message:

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

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

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

What is the likely cause of the issue?

medium

A. You must build the app before running with dev: true

B. Using dev: true disables the HTTP server

C. You forgot to add a callback to listen()

D. You cannot use 'http' module with Next.js

Solution

1. Step 1: Check listen() usage

   The listen method works without a callback, but missing callback means no confirmation message that the server started.

2. Step 2: Rule out other options

   dev: true enables development mode (no build needed), doesn't disable HTTP server, and http module is compatible with Next.js custom servers.

3. Step 3: Confirm the issue

   You forgot to add a callback to listen() identifies the missing callback, which prevents the confirmation log like 'Server running...' seen in working examples.

4. Final Answer:

   You forgot to add a callback to listen() -> Option C

5. Quick Check:

   Missing listen callback = no start confirmation [OK]

Hint: Add listen callback to confirm server start [OK]

Common Mistakes:

• Thinking dev: true disables server
• Believing http module is incompatible
• Assuming build is required for dev mode

5. You want to self-host a Next.js app with Node.js and add a custom API route that logs requests before handling them. Which code snippet correctly adds this feature?

hard

A. import next from 'next';
import http from 'http';

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

app.prepare().then(() => {
http.createServer((req, res) => {
console.log(`Request URL: ${req.url}`);
handle(req, res);
}).listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
});

B. 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);
console.log(`Request URL: ${req.url}`);
}).listen(3000);
});

C. import next from 'next';
import http from 'http';

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

app.prepare().then(() => {
http.createServer((req, res) => {
res.writeHead(200);
res.end('Logged request');
console.log(`Request URL: ${req.url}`);
}).listen(3000);
});

D. import next from 'next';
import http from 'http';

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

app.prepare().then(() => {
http.createServer((req, res) => {
console.log(`Request URL: ${req.url}`);
}).listen(3000);
});

Solution

1. Step 1: Identify correct request logging order

   Logging the request URL before calling handle(req, res) ensures the log happens before Next.js processes the request.

2. Step 2: Check response handling

   import next from 'next';
   import http from 'http';
   
   const app = next({ dev: false });
   const handle = app.getRequestHandler();
   
   app.prepare().then(() => {
     http.createServer((req, res) => {
       console.log(`Request URL: ${req.url}`);
       handle(req, res);
     }).listen(3000, () => {
       console.log('Server running on http://localhost:3000');
     });
   });

   calls handle after logging, letting Next.js handle the response properly. Other options either log after response or do not call handle.

3. Step 3: Confirm server start callback

   import next from 'next';
   import http from 'http';
   
   const app = next({ dev: false });
   const handle = app.getRequestHandler();
   
   app.prepare().then(() => {
     http.createServer((req, res) => {
       console.log(`Request URL: ${req.url}`);
       handle(req, res);
     }).listen(3000, () => {
       console.log('Server running on http://localhost:3000');
     });
   });

   includes a listen callback to confirm server is running, which is good practice.

4. Final Answer:

   Code snippet with console.log before handle(req, res) -> Option A

5. Quick Check:

   Log before handle() for correct request processing [OK]

Hint: Log requests before calling handle() to capture all requests [OK]

Common Mistakes:

• Logging after response ends, missing some requests
• Not calling handle(), breaking Next.js routing
• Omitting server start confirmation callback