静的サイト Next.js
使用する場合
ランディングページ、コーポレートサイト、キャンペーンページ、ポートフォリオ、ブログに使用します。結果はフロントエンドのみで、HTML/CSS/JS としてエクスポートされ、Cloudflare Pages に公開されます。
使用しない場合: ログイン、ユーザー登録、データベース、管理パネル、課金、アップロード、独自 API がある場合。その場合は sistema-fullstack スキルを使用してください。
プロジェクトの作成
- 名前、最終的なドメイン、ページの目的、お問い合わせフォームの有無を確認します。
- 静的サイトリポジトリを使用します:
git clone https://github.com/guibean/nextjs-template.git <スラッグ>
cd <スラッグ>
git remote remove origin
git remote add origin https://github.com/guibean/<スラッグ>.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は1つだけにし、見出しの階層を維持します。 - 新しいページごとに
createMetadata、サイトマップへのエントリ、ナビゲーション可能なリンクが必要です。 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
- サイトマップにすべての公開ページが含まれている
llms.txtが更新されているassets/images/とpublic/images/の画像が生成されているh1が1つ、コントラスト、フォーカス表示、キーボードナビゲーション- 外部リンクに適切な
rel属性 pnpm lint、pnpm typecheck、pnpm buildがパスしている- Lighthouse が4つのカテゴリすべてで ≥ 95
- フォームまたはアナリティクスがある場合はプライバシーポリシーが更新されている
Cloudflare Pages へのデプロイ
- Build command:
pnpm build - Output directory:
out - Node: 24
- ビルド時の公開変数と Functions のシークレット
NEXT_PUBLIC_SITE_URL、TURNSTILE_HOSTNAME、CONTACT_ALLOWED_ORIGINでドメインを設定します