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将不得不以某种方式导出网址段中有效的字母的所有可能组合，这根本不是一个好主意。

例如，链接到页面时，最接近的方法是使用查询参数和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的请求。这由您自己确定。

Answer 2

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

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

这样，每个请求都会进入索引组件，从这里开始，您可以处理路径重定向。

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

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

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

2 个答案: