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
- Build command:
pnpm build - Output directory:
out - Node: 24
- 公開變數在建構時設定，秘密變數在 Functions 中設定
- 在
NEXT_PUBLIC_SITE_URL、TURNSTILE_HOSTNAME和CONTACT_ALLOWED_ORIGIN中設定域名