Question 72898 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Build NextJS as a Static Site and serve it in monolithic backend (node Express or NestJS) – Reactjs

I have a simple project built in:

  • Node v16.14
  • Express
  • Nextjs v13.2

I want to serve the output generated from Nextjs Static HTML Export in NestJS with Serve Static or in Express.

The output from my Nextjs build doesn’t include an index.html file or similar.

How can I implement a monolithic server that handles the API requests and also serves my web UI SPA?

I also tried the instruction from Nextjs’ docs and from the answer from Mohssine Oussama. Here’s the output I got after running next build && next export with the output: 'export' option enabled at next.config.js

nextjs output

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was caused by not having configured an Image Optimization Strategy, and this is required when you're generating a Static Site in Nextjs.

    There error message logging from NextJS is a bit cryptic. But this issue can be fixed by disabling image optimization in next.config.js

    This is how my next config file looks right now:

    const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

  2. 0

    I’m assuming that you did this changes

    // next.config.js

...
 output: 'export',
};


// package.json
...
 "build": "next build && next export",
}

    when you will run npm run build you will get out folder in the root of your project as it shown in the image:

    output of export nextjs

    you will have index.html and html of other pages So you can serve this folder with express

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search