Next.js MCP Server
Next.jsアプリの開発・分析・最適化をClaudeが直接支援できる
最終更新：2026年3月26日
クイックインストール
npx next-devtools-mcp概要
Next.js MCP Serverは、ReactベースのWebフレームワーク「Next.js」の開発をClaudeから支援するMCPサーバー。
ページ・コンポーネント・APIルートの生成、App Router/Pages Routerの設定、パフォーマンス分析、SEO最適化をClaudeで自動化できる。
Vercelが開発する最新のNext.js機能（Server Components・Server Actions・Edge Runtime等）に対応したコードをClaudeが生成できる。
Next.jsプロジェクトの開発速度向上と品質改善に貢献する。
料金・APIキー情報
APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
Next.jsのページコンポーネントをClaudeが自動生成して開発スピードを大幅に向上できる
既存のNext.jsコードをClaudeが分析してパフォーマンスボトルネックを特定できる
APIルートの実装をClaudeが提案・生成してバックエンドロジックを素早く作れる
Pages RouterからApp Routerへの移行をClaudeが自動変換して工数を削減できる
セットアップ手順
- 1
Node.jsがインストールされていることを確認する（v18以上推奨）
- 2
APIキーは不要
- 3
ターミナルで以下のコマンドを実行してClaude Codeに追加する：claude mcp add nextjs -- npx -y next-devtools-mcp
設定ファイル
⚠️
コピー前に確認
APIキー不要。Node.js v18以上の環境が必要。
Terminal
claude mcp add nextjs -- npx -y next-devtools-mcp#フロントエンド#React#フルスタック