用途:本资料是 contentstack/kickstart-next-ssg 项目的技能说明,适用场景包括:修改应用获取或展示 CMS 内容的方式、调试 Live Preview 或 Visual Builder 集成、为新字段或内容类型扩展 TypeScript 类型。
入口文件:lib/contentstack.ts 提供 stack、initLivePreview()、getPage(url);lib/types.ts 提供与 CMS 对齐的类型,例如 Page、Block、File。
Stack 配置:基于 @contentstack/delivery-sdk 的 contentstack.stack({ ... }),读取 NEXT_PUBLIC_CONTENTSTACK_API_KEY、NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN、NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT 及区域相关设置。可选覆盖项有 NEXT_PUBLIC_CONTENTSTACK_CONTENT_DELIVERY、NEXT_PUBLIC_CONTENTSTACK_PREVIEW_HOST、NEXT_PUBLIC_CONTENTSTACK_CONTENT_APPLICATION、NEXT_PUBLIC_CONTENTSTACK_PREVIEW(布尔字符串)、NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN。区域解析使用 @timbenniks/contentstack-endpoints 的辅助方法,与 NEXT_PUBLIC_CONTENTSTACK_REGION 对应。
内容获取:getPage(url) 查询内容类型 page 的 url 字段,通过 QueryOperation.EQUALS 等值匹配并返回第一条记录;当 NEXT_PUBLIC_CONTENTSTACK_PREVIEW === 'true' 时,对记录应用 contentstack.Utils.addEditableTags 以支持编辑器内叠加层。
Live Preview:pages/index.tsx 在 useEffect 中调用 initLivePreview();ContentstackLivePreview.onEntryChange 会重新获取首页,使预览界面更新。initLivePreview 位于 lib/contentstack.ts,使用 @contentstack/live-preview-utils,模式为 "builder",从环境变量获取 stack 信息,可选应用主机来自环境变量或 endpoints,并启用编辑按钮(排除 outsideLivePreviewPortal)。
种子栈与令牌:CLI 播种和令牌设置的说明记录在根目录 README.md 中,涉及带预览权限的 delivery token 与 Live Preview 环境。
图片与 URL:next/image 的远程图片主机名在 next.config.mjs 中配置,可选的环境变量 NEXT_PUBLIC_CONTENTSTACK_IMAGE_HOSTNAME 用于缩小或替换默认值。
限制:资料未提供具体命令、价格、收费或效果说明,这些内容暂未提供。