Site Estático Next.js
何时使用
适用于落地页、企业网站、活动页面、个人作品集或博客。结果仅为前端，导出为 HTML/CSS/JS 并发布到 Cloudflare Pages。
请勿使用 当涉及登录、注册、数据库、管理面板、收费、文件上传或自建 API 时。请改用 sistema-fullstack 技能。
创建项目
- 确认名称、最终域名、页面目标以及是否存在联系表单。
- 使用静态网站仓库：
git clone https://github.com/guibean/nextjs-template.git <slug>
cd <slug>
git remote remove origin
git remote add origin https://github.com/guibean/<slug>.git
- 基于
.env.example创建.env.local并填写NEXT_PUBLIC_SITE_URL、名称、作者和邮箱。 - 运行
pnpm install、pnpm lint、pnpm typecheck和pnpm build。 - 然后才能修改内容。
规则
- 不要添加后端依赖。
- 按需安装 shadcn 组件：
pnpm exec shadcn add dialog
pnpm exec shadcn add @aceternity/spotlight
- 对于 Aceternity 块，检查许可证，仅当组件需要时才安装
motion。 - 每页保持一个
h1和正确的标题层级。 - 每个新页面都需要
createMetadata、sitemap 条目和可导航链接。 - 使用
next/image并设置sizes，图片需通过pnpm images处理。 - 此配置下不要使用
output: "server"、Server Actions 或 Next API Routes。 - 表单：保留 Turnstile +
functions/api/contact.ts+ Resend。
交付前检查清单
阅读 references/seo-checklist.md 并确认：
- metadata、canonical、Open Graph 和 robots
- sitemap 包含所有公开页面
llms.txt已更新- 图片位于
assets/images/和public/images/并已生成 - 一个
h1、对比度、可见聚焦和键盘导航 - 外部链接带有正确的
rel属性 pnpm lint、pnpm typecheck、pnpm build通过- Lighthouse 四类指标 ≥ 95
- 隐私信息已更新（如果包含表单/分析工具）
Cloudflare Pages 部署
- 构建命令：
pnpm build - 输出目录：
out - Node 版本：24
- 公共变量在构建中设置，秘密变量在 Functions 中使用
- 在
NEXT_PUBLIC_SITE_URL、TURNSTILE_HOSTNAME和CONTACT_ALLOWED_ORIGIN中配置域名