Expanding my knowledge to next.js, I might be overlooking a simple aspect. My goal is to implement custom routes, so I crafted a server.js file and adjusted the command in my package.json to node server.js. Below is the entirety of the 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);
});
Based on the documentation, this setup should function as intended. The objective is to display the index page with the user's locale in the specified route ('/:lang/home'). To achieve internationalization, I'm utilizing react-intl.
Upon checking the client-side console, an error message is displayed:
https://i.sstatic.net/QhBne.png
The message, written in Dutch, signifies the inability to locate specific files. Consequently, the Hot Module Replacement (HMR) feature ceases to operate, routing malfunctions (evident with Router.push), while still correctly loading the index page in the browser.
Further attempts were made to toggle the following flag based on the guidelines:
module.exports = {
useFileSystemPublicRoutes: false
}
Regrettably, no improvements observed.
Is there a detail I've overlooked? Could it be related to the redirection implementation or the approach towards handling routing? Any guidance and insights would be greatly appreciated :)
Many thanks in advance!