Next.js Custom Server

Next.js Custom Server allows advanced customization by overriding default behavior. It enables tailored server-side logic, middleware integration, and API route handling, offering flexibility beyond standard Next.js configurations.

Next.js Custom Server

A custom server in Next.js is a Node.js script that runs in the same process as the Next.js development server. This script can handle additional server-side logic, such as handling API routes, handling errors, and setting custom headers.

By default, Next.js abstracts away much of the server-side configuration, providing a streamlined development experience focused on client-side rendering and routing. However, in scenarios where more control or specific server-side features are required, Next.js allows developers to customize the server setup.

Steps to Implement Custom Server in Next.js

Step 1: Create a new server file

In the root of your Next.js project, create a new file called server.js. This file will contain the code for your custom server.

Step 2: Import next and http

In the server.js file, import the next and http modules. The next module is the Next.js server, and the http module is the built-in Node.js HTTP module.

Step 3: Create an instance of the Next.js server

Using the imported next module, create an instance of the Next.js server. This instance will handle the basic server-side rendering of your application.

Step 4: Handle API routes

In the server.js file, add your own custom routes for handling API requests. You can use any routing library, such as Express.js, to handle these routes.

The server.js file code will look like:

// Filename - server.js file

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

const app = next({ dev: process.env.NODE_ENV !== "production" });

app.prepare().then(() => {
    const server = http.createServer((req, res) => {
    
        // Handle API routes
        if (req.url.startsWith("/api")) {
        
            // Your API handling logic here
        } else {
        
            // Handle Next.js routes
            return app.getRequestHandler()(req, res);
        }
    });
    server.listen(3000, (err) => {
        if (err) throw err;
        console.log("> Ready on http://localhost:3000");
    });
});

Step 5. In the package.json file, add a new script that starts the custom server.

"scripts": {
    "dev": "node server.js"
},

Step 6: Start the development server

Using the command prompt, navigate to the root of the project and start the development server by running the following command in terminal

npm run dev

In this example, the custom server is handling requests that begin with /api, and any other requests are handled by the Next.js server. This allows you to handle custom server-side logic, such as handling API routes, handling errors, and setting custom headers.

Reference: https://nextjs.org/docs/advanced-features/custom-server