Communitygithub.com

Next.js ヘルスチェック & 可観測性スキル

Next.js App Router アプリケーションに本番稼働対応のヘルスチェックエンドポイント (/api/health) と Docker Compose プローブを設定します。「ヘルスチェック設定」「ヘルスエンドポイント追加」「docker compose healthcheck nextjs」などの要求に対応。

Next.js ヘルスチェック & 可観測性スキル とは?

このスキルは、Next.js App Router アプリケーション向けに、モジュール式で本番環境に即したヘルスチェックと可観測性のワークフローを提供します。具体的には、`/api/health` エンドポイントの生成、ゼロ依存の Docker Compose ヘルスプローブの注入、Node.js ランタイムメトリクスの収集を自動化します。Prisma、Drizzle、Supabase、MongoDB などの主要なデータベース/ORMを検出し、それに応じたプローブ設定を生成します。Next.js の動的ルーティングを強制し、キャッシュによる古いデータの返却を防止。Docker Compose の本番イメージ(alpine や distroless)でも動作するよう、`fetch` を利用した curl/wget 非依存のヘルスチェックを実装します。V8 ヒープ使用率やイベントループ遅延 (p99) といった非ブロッキングメトリクスを収集し、HTTP ステータスコードの規律(正常: 200、異常: 503)を徹底します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BIGboss248/nextjs-wordpress/tree/HEAD/.agents/skills/nextjs-healthcheck

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Next.js ヘルスチェック & 可観測性スキル (nextjs-healthcheck)

Next.js App Router アプリケーションで、ヘルスチェックエンドポイント (/api/health)、ゼロ依存の Docker Compose ヘルスプローブ、Node.js ランタイムメトリクスを作成・維持するための、モジュール式で本番環境に即したワークフローです。


ワークフロー概要

flowchart TD
    A["1. プロジェクトスキャン<br/>(データベース & Docker Compose)"] --> B["2. /api/health 生成<br/>(メトリクス付きテンプレート)"]
    B --> C["3. Docker プローブ注入<br/>(docker-compose.yml)"]
    C --> D["4. 検証 & 確認<br/>(curl & docker compose ps)"]

ステップバイステップ実行手順書

アプリケーションのヘルスモニタリングを実装・検証するには、以下のチェックリストを順に実行してください。

1. プロジェクトの確認と依存関係の調査

  • ルートハンドラパスの特定: プロジェクトが app/ または src/app/ のどちらを使用しているか確認します(対象: app/api/health/route.ts または src/app/api/health/route.ts)。
  • データベース/外部ストアの検出: package.json をスキャンして ORM やクライアント(Prisma、Drizzle、Supabase、Mongoose、PostgreSQL、Redis)を特定します。database-probes.md を参照。
  • Docker Compose ファイルの特定: docker-compose.yml、docker-compose.prod.yml、その他のコンポーズスタックを発見します。docker-compose-probes.md を参照。

2. ヘルスチェックルートハンドラの実装

  • ルートテンプレートの選択:
    • データベースなしの場合: route-no-db.ts.template をデプロイ。
    • データベースありの場合: route-with-db.ts.template をデプロイし、プロジェクト固有のDBクライアントを厳密な2秒タイムアウトで配線。
  • 動的実行の強制: export const dynamic = "force-dynamic"; と Cache-Control: no-store, no-cache, must-revalidate ヘッダーが存在することを確認。
  • 非ブロッキングメトリクスの設定: V8 ヒープ使用率、イベントループ遅延(perf_hooks による p99 遅延)、プロセス稼働時間を収集。status-and-metrics.md を参照。
  • HTTP ステータスコードの規律の徹底: healthy/degraded には 200 OK、unhealthy には 503 Service Unavailable を返す。

3. Docker Compose ヘルスプローブの設定

  • Next.js サービスの識別: 検出したコンポーズファイル内の Next.js サービスブロック(nextjs-app、web、app)を調査。
  • ヘルスチェックブロックの注入: docker-compose.healthcheck.template.yml から、ゼロ依存の Node.js fetch ヘルスプローブを追加。

4. 検証とテスト

  • ローカル API テスト:
    curl -i http://localhost:3000/api/health
    
    有効な JSON ペイロード(status、timestamp、uptimeSeconds、checks)を含む HTTP 200 応答を確認。
  • Compose ヘルスステータス確認:
    docker compose ps
    
    初期起動期間後、サービスの状態が (healthy) に遷移することを確認。

エッジケースと既知の AI 落とし穴

[!WARNING]

  • force-dynamic の欠落: Next.js App Router は export const dynamic = "force-dynamic" を省略すると、ルート応答を静的に評価またはキャッシュし、タイムスタンプが古くなり、稼働時間メトリクスが凍結される可能性があります。
  • ハングするデータベース接続: レースタイムアウト(最大2000ms)なしに外部データベースにクエリを実行しないでください。未処理のネットワークレイテンシはリクエストプールの枯渇に連鎖します。
  • コンテナ内の外部ツール依存: Docker ヘルスチェックで curl や wget に依存しないでください。本番用の最小イメージ(例: node:alpine や distroless)にはこれらが含まれていないことがよくあります。Node.js のネイティブ fetch を node -e 経由で使用してください。
  • シークレットの漏洩: 公開 /api/health 応答ペイロードに、データベース接続URL、パスワード、または内部の生のエラートレースを決して出力しないでください。

出力サマリースキーマ

ヘルスチェックの設定が完了したら、簡潔なサマリーレポートを提供します。

### ヘルスモニタリング設定完了

- **ルートハンドラ**: `[app/api/health/route.ts](file:///...)`
- **データベースプローブ**: [設定済み: Prisma / Drizzle / なし] (タイムアウト: 2000ms)
- **ランタイムメトリクス**: V8 ヒープ使用率 & イベントループ遅延 (p99)
- **更新された Docker Compose スタック**: `docker-compose.yml`、`docker-compose.prod.yml`
- **検証ステータス**: PASSED (HTTP 200 / コンテナ正常)

リファレンスガイドとテンプレート

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

BIGboss248/nextjs-wordpress

Create, configure, manage, and validate Google Antigravity customizations including skills, rules, MCP servers, lifecycle hooks, plugins, and custom JSON configs. Use when adding new capabilities to Antigravity, configuring MCP servers, writing rules, creating skills, setting up hooks, or modernizing legacy workflows.

BIGboss248/nextjs-wordpress

Spawn multiple agents into a shared conversation where they debate, disagree, and converge on a solution via a shared chat.json file. Use for architecture decisions, code review debates, design trade-offs, or any problem that benefits from adversarial reasoning. Triggers on "chatroom", "agent debate", "have agents discuss", "agent chatroom", "debate this", or /agent-chatrooms. Also triggers on phrases like "have 3 agents argue about", "multi-agent discussion", or "let them debate".

BIGboss248/nextjs-wordpress

Always-active code intelligence, search, and navigation skill utilizing the codebase-memory MCP server. Enforces an index-first protocol (verifying and refreshing the knowledge graph via index_repository or index_status before searching, required because background auto_watch is disabled to eliminate editor stutter and system lag), followed by graph-first exploration (search_graph, trace_path, get_code_snippet, query_graph, get_architecture, detect_changes) instead of naive text grep or full-file reads. Always activate before searching the codebase, inspecting unknown architecture, finding symbols, or tracing callers/callees.

BIGboss248/nextjs-wordpress

>- Discover, interview, and craft comprehensive UX/UI design specifications (design-spec.md) and design tokens for web components. Triggers on "/component-design", "design component", "design section", "design UI", "wireframe component", or "create design spec".

BIGboss248/nextjs-wordpress

>- Configure and query WooCommerce APIs including WPGraphQL, WooGraphQL, and JWT auth for headless frontends. Use when connecting Next.js to WooCommerce or fetching store catalog data.

BIGboss248/nextjs-wordpress

Orchestrate parallel browser automation using multiple Chrome DevTools MCP instances. Use when a task requires doing the same browser action across many targets simultaneously (e.g., submitting contact forms, filling applications, scraping pages that need JS rendering). Spin up 1-5 parallel Chrome agents.

BIGboss248/nextjs-wordpress

Workflow for spawning an independent subagent to conduct unbiased code reviews and inject adversarial edge-case tests ([ComponentName].edge.test.tsx).

BIGboss248/nextjs-wordpress

>- Build Next.js App Router React components with Suspense skeletons, semantic OKLCH tokens, Jest + RTL unit tests, Playwright visual/hydration checks, and Tailwind logical styling. Triggers on "/nextjs-component-dev", "create component", "new component", "build component", or "develop component".

BIGboss248/nextjs-wordpress

>- Bootstrap, configure, and verify the complete Next.js App Router development environment, developer tooling, testing suites, MCP servers, Docker containerization, and CI/CD. Triggers on "/nextjs-dev-setup", "setup nextjs dev environment", "start a nextjs project", or "containerize nextjs app".

BIGboss248/nextjs-wordpress

Bootstrap, configure, and verify next-intl App Router internationalization (proxy.ts/middleware.ts, next/root-params, [locale] layout, routing). Triggers on "/nextjs-i18n-setup", "setup i18n", "install next-intl", "configure next-intl", "add internationalization", "setup locale routing", "migrate to [locale]".

BIGboss248/nextjs-wordpress

Read/write translation dictionaries (messages/[locale].json), next-intl hooks (getTranslations/useTranslations), providers (Storybook/tests/subtrees), and BiDi styling. Triggers on "/nextjs-i18n-usage", "i18n dictionary", "use translations", "read dictionary", "i18n provider", "next-intl hooks", "storybook i18n", "test i18n", "add translation keys", "localize component", "create a component", "update a component".

BIGboss248/nextjs-wordpress

>- Configure, test, and verify OpenTelemetry (OTel) observability in Next.js App Router applications. Triggers on "/nextjs-otel", "setup otel", "configure opentelemetry", "test otel", or "verify opentelemetry".

BIGboss248/nextjs-wordpress

Step-by-step workflow for designing and building Next.js App Router pages (RSC page.tsx, loading skeleton, metadata, JSON-LD schema, and dynamic static params). Triggers on "/nextjs-page-dev", "create page", "new page", "develop page", "build route", or "implement page".

BIGboss248/nextjs-wordpress

>- Orchestrate end-to-end planning for Next.js App Router projects, generating canonical specifications, design systems, and a 7-phase modular implementation roadmap in docs/plan/. Triggers on "/nextjs-plan", "plan a nextjs project", "plan nextjs app", "create nextjs project plan", "outline nextjs architecture", or "generate plan".

BIGboss248/nextjs-wordpress

Workflow and engineering standards for crafting co-located Storybook CSF3 stories ([ComponentName].stories.tsx) with interactive controls, action spies, and 4 canonical theme variants.

BIGboss248/nextjs-wordpress

>- Build Next.js e-commerce frontends backed by WooCommerce APIs, handling ISR catalogs, cart sessions, and JWT authentication. Use when building or querying Next.js stores with WooCommerce.

BIGboss248/nextjs-wordpress

Self-correcting rules engine and feedback loop that learns from user corrections, mistakes, and project-specific constraints by maintaining a persistent autofix ruleset. Scans learned rules before starting any task, resolves conflicts, and automatically appends new rules upon corrections. Triggers on user corrections ("no, do it this way", "never do X", "always use Y"), /learn, "self repair", "add rule", "update rules", or when diagnosing assumptions and bugs. CRITICAL ALWAYS-ACTIVE LIFECYCLE SKILL. Must always be kept in context, loaded at session start, and consulted before starting ANY task to read and apply active constraints from autofix.json. MUST ALWAYS be triggered immediately whenever the user provides ANY correction, preference, criticism, rejection of an approach, or adjustment ("no", "don't do X", "use Y", "remember", "prefer"), or when any mistake/bug is identified. Automatically and immediately formulates and appends the new imperative rule to the project's autofix.json ruleset file.

BIGboss248/nextjs-wordpress

Setup, automate, and execute SEO audits, CI/CD pre-push/pre-deploy checks, and ranking optimizations using the seo CLI and MCP server.

BIGboss248/nextjs-wordpress

End-to-end repository onboarding and development environment setup skill. Scans repository structure, configures project metadata (docs/project.json), sets up the codebase-memory-mcp code intelligence knowledge graph server (in workspace mcp.json and globally for AGY only), configures git hooks with Husky and Commitlint, establishes multi-stage production Docker containerization, and automates credit-optimized Release Please CI/CD with multi-arch (AMD64 & ARM64) GHCR package deployment. Triggers on "/setup-repository", "setup repository", "setup repo", "initialize repository", "new repo setup", or when preparing any repository for development and AI agent workflows.

BIGboss248/nextjs-wordpress

AI screen scaffolding, layout generation, and variant exploration workflow powered by Google Stitch (StitchMCP). Consumes a component design specification (docs/design/components/[page name]/[component name]/design-spec.md), verifies and reuses the central Stitch project in docs/project.json (or creates/persists one if absent), seeds the project's design system into Stitch, synthesizes layout prompts to generate a screen and create one variant of the given design spec file, downloads and saves Stitch JPG screenshots and HTML code files directly into docs/design/components/[page name]/[component name]/stitch/ using binary-safe PowerShell Invoke-WebRequest, outputs image prompts to the user if visual assets are needed (without calling generate_image to conserve tokens), updates design-spec.md with Stitch layout benchmarks, and audits asset download integrity with an independent subagent. Triggers on "/stitch-design", "generate stitch screen", "create stitch variant", "scaffold screen with stitch", or "stitch...

関連スキル