mcpField
M
modern-best-practice-nextjs

modern-best-practice-nextjs

github.com/academind開発1166 回インストール40 週間前に更新
リポジトリ

modern-best-practice-nextjs について

Next.js App Router の実践方法を示すコーディングエージェント向けスキルです。ルーティング、データ取得、UI 状態、メタデータを扱い、更新の多い Next.js の最新ドキュメント確認も促します。

主な機能

  1. 01App Router のルーティングとレイアウト
  2. 02Server Components を既定にする設計
  3. 03変更処理での Server Actions
  4. 04ローディングとエラー状態
  5. 05Metadata API と SEO の指針

活用シーン

  1. 01Next.js App Router プロジェクトの開始
  2. 02サーバー・クライアントコンポーネントの区分
  3. 03ルートへのローディングとエラー処理の追加
  4. 04ページの SEO メタデータ設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/academind/ai-config --skill modern-best-practice-nextjs

インストール後、Claude Code で/modern-best-practice-nextjsを入力して読み込まれたか確認します。

詳細

Next.js のベストプラクティス（App Router）

Next.js は頻繁に変更されるライブラリです。最新のドキュメントを確認するには、ウェブ検索または context7 MCP（DocsExplorer エージェント経由）を使用してください。

ルーティングと構成

  • 新しい作業では app/ の App Router を使用してください
  • ネストしたレイアウトとルートグループを使ってセクションを整理してください
  • サーバーコンポーネントをデフォルトにし、必要な箇所にだけ 'use client' を追加してください

データの取得とキャッシュ

  • React Server Components でデータを取得してください。useEffect() と fetch() を使ったデータ取得は避けてください
  • ミューテーションにはサーバーアクション（「Server Functions」）を使用し、必要に応じて useActionState などの React Hooks と組み合わせてください

UI の状態

  • ルートレベルの UX のために loading.tsx と error.tsx を用意してください
  • 非同期 UI を Suspense 境界で囲んでください

メタデータと SEO

  • レイアウトとページで Metadata API を使用してください
  • 可能な場合は静的メタデータを優先し、動的メタデータは最小限にしてください

コメント

Markdown 対応