我试图创建一个博客页面来测试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的一个限制吗(在文档中没有找到任何与之相关的东西),或者我们需要配置其他东西吗?
5条答案
按热度按时间gblwokeq1#
真实的的问题是导出
next
应用程序将使其生成静态HTML文件。尽管它仍然能够在呈现页面之前请求数据,但可用路径集不是动态的(它们是在next export
命令期间生成的)。看这个docs和这个example。基于此,我有两种可能的解决方案:
next build && next export
命令;next
应用程序,并托管一个将处理动态路由的Node服务器。toe950272#
这是因为当你直接访问链接或刷新页面时,它会在路径的末尾添加一个斜杠。
next.js
不识别任何这样的路由。为了解决这个问题,我希望有一个最简单的方法来做到这一点。但是,您可以使用custom server来执行此操作。下面是一个例子:希望这对你有帮助。
whhtz7ly3#
为了扩展@Minoru提供的答案,官方Next文档在此example中涵盖了这种情况。
使用
getStaticPaths
和getStaticProps
允许您在构建时创建动态页面,避免404。posts动态页面的示例代码:
在使用
next build && next export
构建站点时,我们将在out
文件夹中看到Next创建了每个帖子页面然后,当您导航到
/posts/3/
时,您将看到id为3的帖子作为参考,此docs页面包含此用例和许多其他用例。
r1zhe5dt4#
我不想违反任何旧的posts规则,但如果其他人在我的上下文中,我使用vercel的功能webhook来进行新的部署,因为我使用firebase,所以我创建了一个简单的firebase function,它被挂接到一个页面的新事件创建触发webhook。我使用了fetch,因为我们可以根据docs请求GET
fbcarpbf5#
2023更新
添加cleanUrls:true到“firebase.json”文件如下