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

当运行项目处于开发模式时，这工作正常，但是一旦我将项目导出为静态，路由就不可访问，我从 next 收到常规 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 访问页面时：

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

这仅在用户尝试 link 或重新加载页面时中断，因为服务器端不支持屏蔽。从理论上讲，您可以使用 Nginx 或 Apache 来代理（代理是正确的词吗？）从 /blog/SLUG_HERE 到 /blog/page?slug=SLUG_HERE 的请求。这个就留给你们自己想办法了。

Answer 2

在你的下一个 js 项目中处理动态路径（假设你正在通过导出路由！）。

确保 trailingSlash 设置为 false 或在您的 next.config.js 文件中根本没有定义

这样，每个请求都会到达索引组件，从这里，您可以只处理路径重定向。

if (window.location.pathname !== "/") {
   Router.push(window.location.pathname + window.location.search);
}

在执行此操作之前确保您的项目已安装（例如使用 useEffect 挂钩执行此操作）

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

Next.js dynamic page params for static export

javascript

reactjs

next.js