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):

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!