[英]Next.js dynamic page params for static export
我的页面取决于路由参数(例如: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
这是不可能的,因为 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
。 这由你来弄清楚。
在您的下一个 js 项目中处理动态路径(前提是您正在通过导出路线!)。
这样,每个请求都将落在索引组件中,从这里开始,您可以只处理路径重定向。
if (window.location.pathname !== "/") {
Router.push(window.location.pathname + window.location.search);
}
在执行此操作之前确保您的项目已安装(例如使用 useEffect 钩子执行此操作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.