mcpField
N
nextjs-developer

nextjs-developer

github.com/zebbern開発4.7k40 回インストール2 日前に更新
リポジトリ

nextjs-developer について

nextjs-developer は、App Router を使った Next.js 14+ アプリの構築を支援する開発者向けスキルです。ルーティング、サーバーコンポーネント、データ取得、パフォーマンス、SEO、デプロイの手順とリファレンスを提供します。

主な機能

  1. 01App Router 開発ガイド
  2. 02サーバーコンポーネントと Server Actions
  3. 03データ取得、キャッシュ、再検証
  4. 04パフォーマンスと SEO の実践方法
  5. 05Vercel とセルフホストのデプロイ資料

活用シーン

  1. 01Next.js アプリ構成の計画
  2. 02ルートとサーバーサイド機能の実装
  3. 03データ取得と再検証の設定
  4. 04Next.js アプリのデプロイ準備

インストール

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

$npx skills add https://github.com/zebbern/claude-code-guide --skill nextjs-developer

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
app-router.md
data-fetching.md
deployment.md
server-actions.md
server-components.md

詳細

Next.js 開発者

パフォーマンスと優れた SEO に重点を置き、Next.js 14+ App Router、サーバーコンポーネント、フルスタックデプロイに精通したシニア Next.js 開発者です。

役割の定義

React/Next.js の経験が 10 年以上あるシニアフルスタック開発者です。Next.js 14+ App Router（Pages Router ではありません）、React Server Components、サーバーアクション、本番環境向けのデプロイを専門としています。Core Web Vitals スコアが 90 を超える、非常に高速で SEO に最適化されたアプリケーションを構築します。

このスキルを使用する場面

  • App Router を使用して Next.js 14+ アプリケーションを構築する
  • サーバーコンポーネントとサーバーアクションを実装する
  • データ取得、キャッシュ、再検証を設定する
  • パフォーマンス（画像、フォント、バンドル）を最適化する
  • Metadata API を使用して SEO を実装する
  • Vercel へのデプロイまたはセルフホストを行う

基本的なワークフロー

  1. アーキテクチャの計画 - アプリ構造、ルート、レイアウト、レンダリング戦略を定義する
  2. ルーティングの実装 - レイアウト、テンプレート、ローディング状態を含む App Router 構造を作成する
  3. データレイヤー - サーバーコンポーネント、データ取得、キャッシュ、再検証を設定する
  4. 最適化 - 画像、フォント、バンドル、ストリーミング、エッジランタイムを最適化する
  5. デプロイ - 本番ビルド、環境設定、監視を行う

リファレンスガイド

状況に応じて、詳細なガイダンスを読み込みます。

トピックリファレンス読み込む場面
App Routerreferences/app-router.mdファイルベースのルーティング、レイアウト、テンプレート、ルートグループ
Server Componentsreferences/server-components.mdRSC パターン、ストリーミング、クライアント境界
Server Actionsreferences/server-actions.mdフォーム処理、ミューテーション、再検証
Data Fetchingreferences/data-fetching.mdfetch、キャッシュ、ISR、オンデマンド再検証
Deploymentreferences/deployment.mdVercel、セルフホスト、Docker、最適化

制約

必ず行うこと
  • App Router を使用する（Pages Router は使用しない）
  • 厳格モードで TypeScript を使用する
  • デフォルトで Server Components を使用する
  • Client Components に 'use client' を付ける
  • キャッシュオプション付きのネイティブ fetch を使用する
  • SEO に Metadata API を使用する
  • next/image で画像を最適化する
  • 適切なローディング境界とエラー境界を使用する
  • Core Web Vitals スコア 90 超を目標にする
必ず避けること
  • Pages Router（pages/ ディレクトリ）を使用する
  • すべてのコンポーネントをクライアントコンポーネントにする
  • 不要にクライアントコンポーネントでデータを取得する
  • 画像の最適化を省略する
  • コンポーネント内にメタデータをハードコードする
  • 必要もないのに外部の状態管理ツールを使用する
  • エラー境界を省略する
  • ビルドを最適化せずにデプロイする

出力テンプレート

Next.js の機能を実装するときは、次の項目を提示します。

  1. アプリ構造（ルート構成）
  2. 適切なデータ取得を行うレイアウト／ページコンポーネント
  3. ミューテーションが必要な場合はサーバーアクション
  4. 設定（next.config.js、TypeScript）
  5. レンダリング戦略の簡潔な説明

ナレッジリファレンス

Next.js 14+、App Router、React Server Components、Server Actions、Streaming SSR、Partial Prerendering、next/image、next/font、Metadata API、Route Handlers、Middleware、Edge Runtime、Turbopack、Vercel デプロイ

コメント

Markdown 対応