Self-hosting with Node.js in NextJS - Mini Project: Build & Apply

Self-hosting a Next.js App with Node.js

📖 Scenario: You want to run your Next.js app on your own computer using Node.js instead of the built-in development server. This helps you understand how Next.js apps work in a real server environment.

🎯 Goal: Build a simple Next.js app and set it up to be self-hosted using Node.js. You will create the app, configure the server, and start it manually.

📋 What You'll Learn

Create a basic Next.js app with a homepage

Add a custom server file using Node.js

Configure the server to handle Next.js requests

Start the server to serve the app on localhost

💡 Why This Matters

🌍 Real World

Self-hosting Next.js apps is useful when deploying to custom servers or learning how Next.js works under the hood.

💼 Career

Understanding how to run Next.js with Node.js servers is important for backend integration and deployment in real projects.

1

Create a basic Next.js app

Create a file called app/page.tsx with a React functional component that returns an <h1> heading with the text "Welcome to Self-hosted Next.js!".

NextJS

// Create a React component in app/page.tsx
// Your code here

Need a hint?

Use a simple function that returns JSX with an <h1> tag.

2

Add a custom Node.js server file

Create a file called server.js at the project root. Import next and http modules. Create a Next.js app instance with dev set to true. Then create an HTTP server that uses the Next.js request handler.

NextJS

// Create server.js with next and http imports
// Your code here

Need a hint?

Use require to import modules and create the Next app with dev: true.

3

Set up the HTTP server to handle requests

In server.js, use app.prepare() to wait for Next.js to be ready. Then create an HTTP server that listens on port 3000. For each request, call handle(req, res) to let Next.js handle routing.

NextJS

const next = require('next');
const http = require('http');

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

// Use app.prepare() and create HTTP server
// Your code here

Need a hint?

Use app.prepare() with .then() to start the server.

4

Start the server with Node.js

Add a start script in package.json that runs node server.js. This lets you start the self-hosted Next.js app by running npm start.

NextJS

// Add start script to package.json
// Your code here

Need a hint?

Edit package.json to add a start script that runs node server.js.