المهارات nextjs-devtools
🔧

nextjs-devtools

مخاطر متوسطة ⚡ يحتوي على سكربتات⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة

MCPツールでNext.jsアプリケーションをデバッグする

متاح أيضًا من: Asmayaseen,92Bilal26

複雑なNext.jsアプリケーションのデバッグには、ルーティング、コンポーネント、ビルド構成の検査が必要です。このスキルは、MCPベースのツールを提供し、ルートの一覧表示、コンポーネントの確認、ビルド情報のチェックを開発環境から直接行うことができます。

يدعم: Claude Codex Code(CC)
⚠️ 63 ضعيف
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-devtools". このNext.jsアプリケーションのすべてのルートを一覧表示

النتيجة المتوقعة:

  • ルートが見つかりました:
  • / - ページ (SSR)
  • /about - ページ (SSR)
  • /api/auth - APIルート (POST, GET)
  • /api/users - APIルート (GET, POST)
  • /dashboard - ページ (SSR)
  • /dashboard/settings - ページ (SSR)

التدقيق الأمني

مخاطر متوسطة
v3 • 1/10/2026

This skill provides Next.js development tooling through an MCP client that connects to the next-devtools-mcp server. It includes a generic MCP client script capable of executing user-provided commands via subprocess and shell, which is necessary for MCP functionality but introduces execution risk. All capabilities align with the stated purpose of Next.js development tooling.

3
الملفات التي تم فحصها
605
الأسطر التي تم تحليلها
5
النتائج
3
إجمالي عمليات التدقيق
مشكلات متوسطة المخاطر (1)
Subprocess shell execution with user-provided commands
The StdioTransport class in mcp-client.py uses subprocess.Popen with shell=True to execute commands (line 204-212). The command is passed via the --stdio/-s CLI argument. While this is necessary for MCP stdio transport functionality, shell=True can enable command injection if input is not properly validated. An attacker who controls the command argument could execute arbitrary shell commands. Relevant code: ```python self._process = subprocess.Popen( self.command, shell=True, stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True, bufsize=1 ) ```
مشكلات منخفضة المخاطر (1)
Downloads and executes npm package at runtime
The start-server.sh script executes `npx next-devtools-mcp@latest` which downloads and runs an external npm package. While this is expected behavior for MCP tooling, it involves dynamic code execution from npm registry without integrity verification. Users should only install trusted packages.

عوامل الخطر

⚡ يحتوي على سكربتات (1)
⚙️ الأوامر الخارجية (1)
🌐 الوصول إلى الشبكة (1)
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
81
المحتوى
30
المجتمع
58
الأمان
78
الامتثال للمواصفات

ماذا يمكنك بناءه

アプリケーション構造を検査する

Next.jsプロジェクトのすべてのルートとコンポーネントを一覧表示して、アプリのアーキテクチャを迅速に理解します。

ビルド設定をデバッグする

ビルド設定とnext.config.jsを確認して、デプロイやビルドの失敗をトラブルシューティングします。

見知らぬコードベースをナビゲートする

ルートの階層とコンポーネントの構成を探索して、新しいNext.jsプロジェクトを効率的に理解します。

جرّب هذه الموجهات

すべてのルートを一覧表示
nextjs-devtoolsを使用して、このNext.jsアプリケーションのすべてのルートを一覧表示してください。
ルート詳細を取得
/api/usersルートの詳細情報を取得してください。ハンドラタイプとパラメータを含めてください。
ビルド設定を確認
get-build-infoを使用して、このNext.jsプロジェクトの現在のビルド設定を表示してください。
コンポーネントを探す
このアプリケーションのすべてのReactコンポーネントを一覧表示して、UI構造を理解してください。

أفضل الممارسات

  • get-build-infoを使用する前にnext buildを実行して、ビルドデータが利用可能なことを確認してください
  • 正確な結果を得るため、Next.jsプロジェクトのルートディレクトリから実行してください
  • 詳細を掘り下げる前に、まずlist-routesを使用してアプリケーション構造を理解してください

تجنب

  • Next.js以外のReactプロジェクトでnextjs-devtoolsを使用する
  • ビルドデータを更新せずにリアルタイムの更新を期待する
  • Next.jsプロジェクトディレクトリ外でスキルを実行する

الأسئلة المتكررة

Next.js 13以降のApp Routerで動作しますか?
はい、App RouterとPages Routerの両方の設定をサポートしています。
どのNext.jsバージョンがサポートされていますか?
最新のnext-devtools-mcpを使用する場合、Next.js 12、13、14、15で動作します。
ローカルのMCPサーバーと一緒に使用できますか?
はい、mcp-client.pyの--urlフラグを使用して、実行中のMCPサーバーに接続できます。
このスキルはプロジェクトデータを安全ですか?
このスキルは検査のためにプロジェクトファイルのみを読み取ります。データは外部サーバーに送信されません。
ルートが見つからないのはなぜですか?
Next.jsプロジェクトのルートから実行しており、.nextディレクトリが存在することを確認してください。
npxを直接使用するのとどう異なりますか?
このスキルは、構造化された出力でAIアシスタントに統合されたアクセスを提供します。

تفاصيل المطور

المؤلف

92Bilal26

الترخيص

MIT

مرجع

main

بنية الملفات