时间戳

首页 > 解决方案 > 首次在 nextjs 上加载动态路由时出现 404

reactjs - 首次在 nextjs 上加载动态路由时出现 404

问题描述

我正在尝试创建一个博客页面来测试nextjs并为帖子创建一个动态路由，该路由将从 Contentful 中检索。从主页导航并单击next/router <Link />组件时，博客文章加载正确，但如果我获取 URL 并尝试直接从浏览器地址栏加载页面，我将得到 404。

重现步骤：

 1. git clone https://github.com/zeit/next-learn-demo.git
 2. cd next-learn-demo/8-deploying
 3. yarn
 4. next build && next export
 5. cd out
 6. serve
 7. Navigate to http://localhost:5000/p/learn-nextjs
 8. See 404

这是 NextJS 的限制（在文档中没有找到与它相关的任何内容）还是我们需要配置其他任何东西？

标签： reactjsnext.js

解决方案

真正的问题是导出next应用程序会使其生成静态 HTML 文件。尽管它仍然能够在呈现页面之前请求数据，但可用路径集不是动态的（它们是在next export命令期间生成的）。请参阅此文档和此示例。

基于此，我有两种可能的解决方案：

  • next build && next export每次在 Contentful 中发布新博文时，都会生成一个 webhook 以触发命令；
  • 避免导出我的next应用程序并托管将处理动态路由的节点服务器。

推荐阅读