用于静态导出的 Next.js 动态页面参数

Question

我的页面取决于路由参数（例如：slug），如下所示http://example.com/blog/:slug。该路由路径在我的 next.config.js 文件中正确定义：

module.exports = withPlugins(plugins, {
  exportPathMap: (defaultPathMap) => {
    return {
      '/': { page: '/home/home' },
      '/blog/:slug': { page: '/careers/careers' }
    }
  }
});

在开发模式下运行项目时，这工作正常，但一旦我将项目导出为静态，路由将无法访问，并且我会收到常规的 404 错误。

有没有办法在不使用查询参数的情况下解决这个问题？ http://example.com/?slug=123

此解决方案https://github.com/zeit/next.js/blob/canary/examples/with-static-export/next.config.js也是不可接受的，因为帖子来自后端 CMS

Answer 1

这是不可能的，因为 Next.js 静态导出会生成静态 html 页面。如果您考虑一下，要使其正常工作，Next.js 必须以某种方式导出 url 段中有效的所有可能的字母组合，这根本不是一个好主意。

您可以获得的最接近的是使用查询参数和as属性，例如链接到页面时：

<Link href='/blog/page?slug=SLUG_HERE' as='/blog/slug'>
  // Link content here
</Link>

仅当用户尝试链接或重新加载页面时，这种情况才会中断，因为服务器端不支持屏蔽。理论上，您可以使用 Nginx 或 Apache 来代理（代理这个词正确吗？）来自 的/blog/SLUG_HERE请求/blog/page?slug=SLUG_HERE。这需要你自己去弄清楚。