nextjs-devtools
MCPツールでNext.jsアプリケーションをデバッグする
متاح أيضًا من: Asmayaseen,92Bilal26
複雑なNext.jsアプリケーションのデバッグには、ルーティング、コンポーネント、ビルド構成の検査が必要です。このスキルは、MCPベースのツールを提供し、ルートの一覧表示、コンポーネントの確認、ビルド情報のチェックを開発環境から直接行うことができます。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "nextjs-devtools". このNext.jsアプリケーションのすべてのルートを一覧表示
النتيجة المتوقعة:
- ルートが見つかりました:
- / - ページ (SSR)
- /about - ページ (SSR)
- /api/auth - APIルート (POST, GET)
- /api/users - APIルート (GET, POST)
- /dashboard - ページ (SSR)
- /dashboard/settings - ページ (SSR)
التدقيق الأمني
مخاطر متوسطة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.
مشكلات متوسطة المخاطر (1)
مشكلات منخفضة المخاطر (1)
عوامل الخطر
⚡ يحتوي على سكربتات (1)
⚙️ الأوامر الخارجية (1)
🌐 الوصول إلى الشبكة (1)
درجة الجودة
ماذا يمكنك بناءه
アプリケーション構造を検査する
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プロジェクトディレクトリ外でスキルを実行する