expressjsHow can I use Express.js and Next.js together?

Express.js and Next.js can be used together to create a powerful server-side rendered React application. Express.js is a web application framework for Node.js and Next.js is a React framework for server-side rendered applications.

Here is an example of how to use Express.js and Next.js together:

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

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
  .then(() => {
    const server = express();

    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

This code will create an Express server and handle all requests with Next.js.

Code explanation

const express = require('express');: This line imports the Express.js library.
const next = require('next');: This line imports the Next.js library.
const port = process.env.PORT || 3000;: This line sets the port to either the environment variable PORT or 3000.
const dev = process.env.NODE_ENV !== 'production';: This line sets the environment to either development or production.
const app = next({ dev });: This line creates a Next.js instance based on the environment.
const handle = app.getRequestHandler();: This line creates a request handler for Next.js.
app.prepare(): This line pre-renders the Next.js application.
server.get('*', (req, res) => {: This line creates a route for Express.js that will handle all requests.
return handle(req, res);: This line returns the Next.js request handler.
server.listen(port, (err) => {: This line starts the Express server on the port.

Helpful links

Edit this code on GitHub

More of Expressjs

See more codes...