Next.js自定义服务器应用渲染异常问题求助

Hey there! Let's walk through the likely issues with your setup and how to fix them — it looks like you're missing a key piece in handling all Next.js requests, which is causing the HMR and Router problems you're seeing.

1. Missing Catch-All Route for Next.js Requests #

Your current server only handles the root (/) and /:lang/home routes, but all other requests (like static assets, HMR endpoints, or other page routes) aren't being passed to Next.js's default request handler. This is why you're seeing "file not found" errors in the client — resources like /_next/static/... or HMR update endpoints can't be served, breaking hot reloading and client-side routing.

Fix this by adding a catch-all route at the end of your server setup to pass all unhandled requests to Next.js's handle function:

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);
    });

    // Add this catch-all route to handle all other Next.js requests
    server.get("*", (req, res) => {
      return handle(req, res);
    });

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

2. Verify Locale Middleware Configuration #

Right now, you only apply createLocaleMiddleware() to the root route. While you're pulling the lang param directly from the URL for /lang/home, it's a good idea to initialize the middleware with a default locale to avoid unexpected behavior if req.locale is ever undefined:

const localeMiddleware = createLocaleMiddleware({
  default: "en", // Set your fallback locale here
});
// Apply it to all routes if you need locale access elsewhere
server.use(localeMiddleware);

// Then adjust your root redirect:
server.get("/", (req, res) => {
  res.redirect(`/${req.locale.language}/home`);
});

3. Check Client-Side Routing Usage #

Make sure your client-side Router.push calls use the full route format your server handles. For example:

// Correct
Router.push("/en/home");
// Avoid relative paths that might resolve incorrectly
// Router.push("home"); // This could cause issues

4. Re-test useFileSystemPublicRoutes: false #

This config disables Next.js's automatic file-system based routing, which is useful when using a custom server. Now that you've added the catch-all route, try enabling it in your next.config.js again to ensure Next.js doesn't try to auto-generate conflicting routes:

module.exports = {
  useFileSystemPublicRoutes: false,
};

Additional Debugging Steps #

• Inspect Client Errors: Look closely at the Dutch error message — it should tell you exactly which file is missing. If it's a /_next/... resource, that confirms the catch-all route was missing.
• Test HMR After Fixes: Once you add the catch-all route, restart your server and check if hot reloading works when you make changes to your components.
• Validate Route Handling: Try navigating to other routes (if you have them) using Router.push to ensure they're being handled correctly by the catch-all route.

内容的提问来源于stack exchange，提问作者Simon Temmerman