CODEWITHSUNDEEP
javascriptexpressnext.js
Simon Temmerman
Simon Temmerman

Reputation: 203

next.js app with custom server is not rendering correctly

I'm new to next.js so maybe I'm missing something very stupid. I want to use custom routes so I created a server.js file and changed my package.json command to node server.js. This is the entire server.js file:

const express = require("express");
const next = require("next");
const createLocaleMiddleware = require("express-locale");

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

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

    server.get("/", createLocaleMiddleware(), (req, res) => {
      res.redirect(`/${req.locale.language}/home`);
    });

    server.get("/:lang/home", (req, res) => {
      const actualPage = "/";
      const queryParams = { locale: req.params.lang };
      app.render(req, res, actualPage, queryParams);
    });

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

I believe that according to the docs, this should work. I just want to render the index page with the users locale on the specified route ('/:lang/home'). I'm using react-intl for the i18n.

Now I get the following error in the console (client side):

enter image description here

It's in dutch but it's just saying it can't find any of the specified files. So now the HMR is not working anymore, routing is not working anymore (with Router.push). The only thing it does correctly is loading the index page (I can see it in the browser).

I also tried to enable and disable this flag from the docs:

module.exports = {
  useFileSystemPublicRoutes: false
}

Sadly, no effect.

Am I missing something? Is it because I'm redirecting? Or is this not to way to handle routing? If someone could provide some pointers that would be great :)

Thanks in advance!

Upvotes: 2

Views: 3409

Answers (1)

lipp
lipp

Reputation: 5926

You are missing server.get('*', handle) as you can see in the custom server express example. This is absolutely required :)

Upvotes: 3

Related Questions