CODEWITHSUNDEEP
reactjsexpressnext.js
Callum
Callum

Reputation: 1165

ReactJS and Next.js 404 after page reload

I have a react frontend on my Wordpress blog and it works great if I run node server.js. I can reload on any page and it will work as expected.

On my production server if I run node server.js then it works fine. If I build and run npm run start which is set to run next start -p 80 the website does not work properly.

Here's my server.js code:

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

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

app

  .prepare()
  .then(() => {

    const server = express();

    server.use(compression());
    server.use(express.static(__dirname + '/static', { maxAge: 31557600 }));

    server.get('/about', (req, res) => {
      app.render(req, res, '/about');
    });

    server.get('/post/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, apiRoute: 'post' };
      app.render(req, res, '/post', queryParams);
    });

    server.get('/page/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, apiRoute: 'page' };
      app.render(req, res, '/post', queryParams);
    });

    server.get('/city/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, taxonomy: 'city' };
      app.render(req, res, '/category', queryParams);
    });

    server.get('/country/:slug', (req, res) => {
      const queryParams = { slug: req.params.slug, taxonomy: 'country' };
      app.render(req, res, '/category', queryParams);
    });

    server.get('/_preview/:id/:wpnonce', (req, res) => {
      const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce };
      app.render(req, res, '/preview', queryParams);
    });

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

    server.listen(process.env.NODE_PORT, err => {
      if (err) throw err;
      console.log("> Ready on port " + process.env.NODE_PORT);
    });

  })

  .catch(ex => {

    console.error(ex.stack);
    process.exit(1);

  });

When the server is running with next I can view pages and when I reload it works fine. If I try to load a blog post or category/city/country then it will always 404.

Is it an issue with the server.js code or a problem in the React pages for /post and /category?

Upvotes: 2

Views: 2412

Answers (1)

Obed Parlapiano
Obed Parlapiano

Reputation: 3712

You need to run npm run build and then npm run start. You need to build the bundle first, otherwise your pages and the nextjs code are not created.

It works on dev because you don't need to build a bundle for dev, the code is accessed directly, but this is not efficient for production.

Here's the usual code for build and start: 

"build": "next build",
"start": "NODE_ENV=production node server.js",

They need to be placed in your package.json. You prob already have them, since you're saying you're running npm run start.

For more information the NextJS tutorial walks you through this in #9 of the basic - Deploying a Next.js App

Upvotes: 3

Related Questions