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

Posted 2023-03-06

【中文标题】Next.js 用于静态导出的动态页面参数

【英文标题】：Next.js dynamic page params for static export

【发布时间】：2019-08-15 19:15:51

【问题描述】：

我的页面依赖于路由参数（例如：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

【参考方案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 的请求。这留给您自己解决。

【讨论】：

查看类似问题和解决方案：***.com/questions/43862600/…

【参考方案2】：

在您的下一个 js 项目中处理动态路径（前提是您正在通过导出路径！）。

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

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

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

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