# @contentful/vercel-nextjs-toolkit 中文文档 规范地址：https://npmcn.com/package/%40contentful/vercel-nextjs-toolkit/ 版本：1\.6\.2 npm 元数据更新时间：2026-10-14T19:35:12.398Z 中文译文更新时间：2026-11-10T16:41:42.287Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40contentful/vercel-nextjs-toolkit 原文对照：https://npmcn.com/package/%40contentful/vercel-nextjs-toolkit/?lang=original 项目主页：https://github.com/contentful/vercel-nextjs-toolkit#readme 源码仓库：https://github.com/contentful/vercel-nextjs-toolkit ## 关键信息（来自 npm 元数据） - 包体积（解压后）：27.3 kB，23 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：next ^14\.2\.2 \|\| ^15\.1\.9 \|\| ^16\.0\.7 - 首次发布：2024-04-26T15:07:57.292Z - 最新版本发布：2026-10-14T19:35:12.184Z - 近 30 天下载量：14069（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：28（近 12 个月 2 个） ## 中文简介 为 Vercel 平台应用集成提供内容帮助的 SDK 预览 ## 安装 ```sh npm install @contentful/vercel-nextjs-toolkit ``` 也可以使用：`pnpm add @contentful/vercel-nextjs-toolkit`、`yarn add @contentful/vercel-nextjs-toolkit`、`bun add @contentful/vercel-nextjs-toolkit` ## README # 下个内容工具箱 [![](https://badgen.net/npm/v/@contentful/vercel-nextjs-toolkit)](https://www.npmjs.com/package/@contentful/vercel-nextjs-toolkit)[![](https://img.shields.io/bundlephobia/min/%40contentful%2Fvercel-nextjs-toolkit) ](https://bundlephobia.com/result?p=@contentful/vercel-nextjs-toolkit)[![](https://badgen.net/npm/license/@contentful/vercel-nextjs-toolkit) ](https://github.com/@contentful/vercel-nextjs-toolkit/blob/main/LICENSE)[![](https://github.com/contentful/vercel-nextjs-toolkit/actions/workflows/release-package.yml/badge.svg)](https://npmcn.com/package/%40contentful/vercel-nextjs-toolkit/\(https://github.com/contentful/vercel-nextjs-toolkit/actions/workflows/release-package.yml) Next.js帮助工具箱,在Vercel上主办的Next.js项目中更容易使用Contentful. 这个工具包旨在作为Contentful's Vercel App的伴机,一个Contentful Marketplace集成,帮助您的内容团队与由Contentful提供动力的Vercel项目一起快速起跑. ## 所需资源 - 节点.js v16 或以后 - 下一个.js v13 或以后 ## 开始 使用 npm 安装工具包 : ```sh npm install --production @contentful/vercel-nextjs-toolkit ``` ## 使用量 ### 启动草稿模式的路由处理器 该工具包提供了方便的路由处理器,您可以从您的应用程序导出,允许您的团队成员激活 [草稿模式](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode),使他们能够在您的应用程序中动态查看未发布的内容. 这些操作员利用Vercel的 [自动化保护副通道](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) 特性,以确保只有在用户通过此特性获得授权时,才能使用草稿模式. Contentful's Vercel App 利用这些处理器提供预览URL,可以在框外使用Contentful的预览功能来进行内容编辑. #### App 路由器使用量 如果您的下个Js 工程正在使用 [应用路由器](https://nextjs.org/docs/app), (中文(简体) ), 创建一个 `route.ts` 或者说 `route.js` [路由处理器](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) 文件在一个专用文件夹中(例如). `api/enable-draft`在你体内 `app` 目录 : ```ts // app/api/enable-draft/route.ts|js export { enableDraftHandler as GET } from "@contentful/vercel-nextjs-toolkit/app-router" ``` #### 路由器使用量 如果您的下个Js 工程正在使用 [页面路由器](https://nextjs.org/docs/pages),创建 `enable-draft.ts` 或者说 `enable-draft.js` [API 路径](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) 文件在 `pages/api` 目录 : ```ts // pages/api/enable-draft.ts|js export { enableDraftHandler as default } from "@contentful/vercel-nextjs-toolkit/pages-router"; ``` #### 预览 URL 输出 使用上面安装的这些处理器,您可以构建预览 URL,激活Draft Mode,并将用户重定向到应用程序中想要的路径. 因为处理者使用Vercel的 [自动化保护副通道](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) 特性,您将选择 _启用_ 在您的 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 中 [内容预览](https://www.contentful.com/developers/docs/tutorials/general/content-preview/) 体验给您内容丰富的用户. ## 额外有用资源 - 待 补 ## 联系我们 ### 你有关于如何使用图书馆的问题吗? - 联系我们的社区 论坛: [![Contentful Community Forum](https://img.shields.io/badge/-Join%20Community%20Forum-3AB2E6.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1OSI+CiAgPHBhdGggZmlsbD0iI0Y4RTQxOCIgZD0iTTE4IDQxYTE2IDE2IDAgMCAxIDAtMjMgNiA2IDAgMCAwLTktOSAyOSAyOSAwIDAgMCAwIDQxIDYgNiAwIDEgMCA5LTkiIG1hc2s9InVybCgjYikiLz4KICA8cGF0aCBmaWxsPSIjNTZBRUQyIiBkPSJNMTggMThhMTYgMTYgMCAwIDEgMjMgMCA2IDYgMCAxIDAgOS05QTI5IDI5IDAgMCAwIDkgOWE2IDYgMCAwIDAgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0UwNTM0RSIgZD0iTTQxIDQxYTE2IDE2IDAgMCAxLTIzIDAgNiA2IDAgMSAwLTkgOSAyOSAyOSAwIDAgMCA0MSAwIDYgNiAwIDAgMC05LTkiLz4KICA8cGF0aCBmaWxsPSIjMUQ3OEE0IiBkPSJNMTggMThhNiA2IDAgMSAxLTktOSA2IDYgMCAwIDEgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0JFNDMzQiIgZD0iTTE4IDUwYTYgNiAwIDEgMS05LTkgNiA2IDAgMCAxIDkgOSIvPgo8L3N2Zz4K&maxAge=31557600)](https://support.contentful.com/) - 跳入我们的社区 频道 : [![Contentful Community Slack](https://img.shields.io/badge/-Join%20Community%20Slack-2AB27B.svg?logo=slack&maxAge=31557600)](https://www.contentful.com/slack/) ### 找到错误还是想要提议一个特性 ? - 在 GitHub 上存档 : [![File an issue](https://img.shields.io/badge/-Create%20Issue-6cc644.svg?logo=github&maxAge=31557600)](https://github.com/contentful/vercel-nextjs-toolkit/issues/new)。 。 。 . 在共享之前, 请在代码中删除任何证书 . ### 你需要分享机密信息还是有其他问题? - 使用 Contentful 客户端存档支持票 支助: [![File support ticket](https://img.shields.io/badge/-Submit%20Support%20Ticket-3AB2E6.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA1OSI+CiAgPHBhdGggZmlsbD0iI0Y4RTQxOCIgZD0iTTE4IDQxYTE2IDE2IDAgMCAxIDAtMjMgNiA2IDAgMCAwLTktOSAyOSAyOSAwIDAgMCAwIDQxIDYgNiAwIDEgMCA5LTkiIG1hc2s9InVybCgjYikiLz4KICA8cGF0aCBmaWxsPSIjNTZBRUQyIiBkPSJNMTggMThhMTYgMTYgMCAwIDEgMjMgMCA2IDYgMCAxIDAgOS05QTI5IDI5IDAgMCAwIDkgOWE2IDYgMCAwIDAgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0UwNTM0RSIgZD0iTTQxIDQxYTE2IDE2IDAgMCAxLTIzIDAgNiA2IDAgMSAwLTkgOSAyOSAyOSAwIDAgMCA0MSAwIDYgNiAwIDAgMC05LTkiLz4KICA8cGF0aCBmaWxsPSIjMUQ3OEE0IiBkPSJNMTggMThhNiA2IDAgMSAxLTktOSA2IDYgMCAwIDEgOSA5Ii8+CiAgPHBhdGggZmlsbD0iI0JFNDMzQiIgZD0iTTE4IDUwYTYgNiAwIDEgMS05LTkgNiA2IDAgMCAxIDkgOSIvPgo8L3N2Zz4K&maxAge=31557600)](https://www.contentful.com/support/) ## 许可证 此寄存器在 [麻省理工学院](https://npmcn.com/package/%40contentful/vercel-nextjs-toolkit/LICENSE) 执照. ## 行为守则 我们希望为所有参与者提供安全、包容、欢迎和无骚扰的空间和经验,而不论其性别认同和表达、性取向、残疾、外貌、社会经济地位、身体大小、族裔、国籍、经验水平、年龄、宗教(或缺失)或其他身份标志. [读读行为守则全文](https://www.contentful.com/developers/code-of-conduct/)。 。 。 . ## 常见问题 ### @contentful/vercel-nextjs-toolkit 是什么？ 为 Vercel 平台应用集成提供内容帮助的 SDK 预览 ### 如何安装 @contentful/vercel-nextjs-toolkit？ 在项目目录运行 npm install @contentful/vercel-nextjs-toolkit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^14\.2\.2 \|\| ^15\.1\.9 \|\| ^16\.0\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @contentful/vercel-nextjs-toolkit 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @contentful/vercel-nextjs-toolkit 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @contentful/vercel-nextjs-toolkit 可以商用吗？ @contentful/vercel-nextjs-toolkit 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contentful/vercel-nextjs-toolkit 的下载量有多少？ 根据 npm 官方下载统计，@contentful/vercel-nextjs-toolkit 在 2026/10/11 – 2026/11/09 这 30 天内被下载 14,069 次，日均约 469 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contentful/vercel-nextjs-toolkit 还在维护吗？ 最新版本 1\.6\.2 发布于 2026/10/15（26 天前）；至今共发布 28 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/04/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。