下个内容工具箱
Next.js帮助工具箱,在Vercel上主办的Next.js项目中更容易使用Contentful.
这个工具包旨在作为Contentful's Vercel App的伴机,一个Contentful Marketplace集成,帮助您的内容团队与由Contentful提供动力的Vercel项目一起快速起跑.
所需资源
- 节点.js v16 或以后
- 下一个.js v13 或以后
开始
使用 npm 安装工具包 :
npm install --production @contentful/vercel-nextjs-toolkit
使用量
启动草稿模式的路由处理器
该工具包提供了方便的路由处理器,您可以从您的应用程序导出,允许您的团队成员激活 草稿模式,使他们能够在您的应用程序中动态查看未发布的内容.
这些操作员利用Vercel的 自动化保护副通道 特性,以确保只有在用户通过此特性获得授权时,才能使用草稿模式.
Contentful's Vercel App 利用这些处理器提供预览URL,可以在框外使用Contentful的预览功能来进行内容编辑.
App 路由器使用量
如果您的下个Js 工程正在使用 应用路由器, (中文(简体) ),
创建一个 route.ts 或者说 route.js 路由处理器 文件在一个专用文件夹中(例如). api/enable-draft在你体内 app 目录 :
// app/api/enable-draft/route.ts|js
export { enableDraftHandler as GET } from "@contentful/vercel-nextjs-toolkit/app-router"
路由器使用量
如果您的下个Js 工程正在使用 页面路由器,创建 enable-draft.ts 或者说 enable-draft.js API 路径 文件在 pages/api 目录 :
// pages/api/enable-draft.ts|js
export { enableDraftHandler as default } from "@contentful/vercel-nextjs-toolkit/pages-router";
预览 URL 输出
使用上面安装的这些处理器,您可以构建预览 URL,激活Draft Mode,并将用户重定向到应用程序中想要的路径.
因为处理者使用Vercel的 自动化保护副通道 特性,您将选择 启用 在您的 Vercel 工程中保护自动化的副路口, 并且将您预览的 URL 与 符号 密钥一起 .
假设您有一个 Next.js 的应用程序和路径 app/blog-posts/[slug].ts,示例预览 URL 可能看起来像:
https://your-vercel-app.com/api/enable-draft?path=%2Fblog-posts%2Fa-day-in-my-life&x-vercel-protection-bypass=generated-vercel-secret
在核实所提供的绕行密钥与您Vercel项目中使用的秘密相匹配后,上面的处理者会将一个用户重定向到:
https://your-vercel-app.com/blog-posts/a-day-in-my-life?x-vercel-protection-bypass=generated-vercel-secret&x-vercel-set-bypass-cookie=samesitenone
表中提供的数值 x-vercel-* 查询参数触发了Vercel在重定向响应中设置饼干,允许未来请求绕过缓存并被调用,同时启用了Draft Mode.
[注]
如果您安装并配置 Contentful 的 Vercel App, 类似上面的预览 URL 将会被动态生成并无缝地集成到 Contentful 中 内容预览 体验给您内容丰富的用户.
额外有用资源
- 待 补
联系我们
你有关于如何使用图书馆的问题吗?
- 联系我们的社区
论坛:
- 跳入我们的社区
频道 :
找到错误还是想要提议一个特性 ?
- 在 GitHub 上存档 :
。 。 。 .
在共享之前, 请在代码中删除任何证书 .
你需要分享机密信息还是有其他问题?
- 使用 Contentful 客户端存档支持票
支助:
许可证
此寄存器在 麻省理工学院 执照.
行为守则
我们希望为所有参与者提供安全、包容、欢迎和无骚扰的空间和经验,而不论其性别认同和表达、性取向、残疾、外貌、社会经济地位、身体大小、族裔、国籍、经验水平、年龄、宗教(或缺失)或其他身份标志.
读读行为守则全文。 。 。 .