Question

我在 /pages 目录中添加了一个自定义 404.js 文件，它在本地工作正常，但是当我运行下一次导出并将所有文件从 out 目录放到 cpanel 中的 public_html 目录时，一切正常，但是当我输入错误时它应该转到 404 页面的路径，而不是我的网络将我带到地址栏中具有相同链接的主页。例如：当我尝试转到 /about 页面时，我没有 /about 页面，我的网站应该向我显示 404 页面，而不是在地址栏中显示带有 /about 的主页（index.html）。

next.config.js 文件

module.exports = {
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      "/": { page: "/" },
      "/faq": { page: "/faq" },
      "/how-it-works": { page: "/how-it-works" },
      "/patient-onboarding": { page: "/patient-onboarding" },
      "/privacy-policy": { page: "/privacy-policy" },
      "/terms-of-use": { page: "/terms-of-use" },
      "/searched-pharmacy": { page: "/searched-pharmacy" },
      "/new-customer": { page: "/new-customer" },
      "/404": { page: "/404" }
    }
  },
  trailingSlash: true,
}

使用"next": "^10.0.6",

server.js 文件

const express = require("express");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";

const sitemapOptions = {
  root: __dirname + "/public/",
  headers: {
    "Content-Type": "text/xml;charset=UTF-8",
  },
};

// Create the Express-Next App
const app = next({ dev });
const handle = app.getRequestHandler();
//Start the app
app
  .prepare()
  //Start Express server and serve the
  .then(() => {
    const server = express();
    // serve sitemap
    server.get("/sitemap.xml", (req, res) =>
      res.status(200).sendFile("sitemap.xml", sitemapOptions)
    );

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

on local showing 404 page

Same path after deployment

Answer 1

终于！我找到了解决我的问题的方法。感谢this document

我的 NextJS 配置没有问题，问题是我的 .htaccess 文件。我已经更改了 .htaccess 文件，404 页面现在可以使用 HTTP 状态代码 404。

我刚刚完成了这两个简单的步骤！

在 root_level 中添加了 404.html 文件
在 .htaccess 文件中添加了这一行 ErrorDocument 404 /404.html

注意： .haccess 和 404.html 文件都在 root_level

导出后 404 页面未显示在 nextjs 中

1 个答案: