NextJS url在导出后不起作用

Question

我刚开始使用 Next JS，在 youtube 上关注 Brad Traversy's tutorial。我使用next export 导出程序，就像他在教程中所做的那样。我用serve -s out -p 8000。该页面在localhost:8000 上加载，但是当我转到localhost:8000/about 等其他链接时，它只是重新加载主页。

我在网上寻找解决方案，我尝试将"trailingSlash": true 添加到我的next.config.js 文件中，但仍然不起作用。

最令人困惑的部分是当点击页面上的链接元素（来自“next/link”模块）时，它可以工作，它会将我带到正确的页面。但是当我想直接从地址栏访问它时它不起作用。

顺便说一句，它在生产过程中也可以工作。

编辑

这是next.config.js 文件：

module.exports = {
    trailingSlash: true,
};

这是package.json 文件：

{
    "name": "next-cc",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "export": "next build && next export"
    },
    "dependencies": {
        "next": "10.1.3",
        "react": "17.0.2",
        "react-dom": "17.0.2"
    }
}

编辑：这是文件夹结构

这是项目的link

Answer 1

问题不在于 Next.js 或导出，而在于您为提供静态文件而运行的命令。

在serve 命令中使用-s 选项会将所有文件重写为index.html。只需运行不带该选项的命令即可。

npx serve out -p 8000

Answer 2

我想导出一个完整的静态网站时遇到了同样的问题。不幸的是，建议的答案对我不起作用，因为我正在将站点部署到 apache 实例。

下一个导出基本上会呈现带有 html 扩展名的网站页面，因此指向 /about 页面的下一个/链接标签在单击时仍然有效，但在通过浏览器 URL 调用时则无效。

要克服这个问题，您需要使用 next.config.js 中的 exportPathMap 条目（文档中的 exportPathMap）

exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/about/index': { page: '/about' },
    }
  },

通常 Next 使用 pages 目录并导出带有页面名称的静态文件并将 .html 附加到它们 - 所以 http://localhost:3000/about 变为 http://example.com/about.html - 但如果你仍然想要短网址，你可以添加路径映射中的 /about/index 条目，这将在 about 目录中生成 index.html 文件，然后您的短 /about 链接仍将在您的实时服务器上按预期工作，即使在页面重新加载或通过直接在浏览器中输入网址。