/ الدليل / الملعب / Next.js DevTools
← كل الخوادم ↗ GitHub
● رسمي vercel ⚡ فوري

Next.js DevTools

بواسطة vercel · vercel/next-devtools-mcp

MCP أدوات Next.js — ابحث في الوثائق الرسمية، شغّل المتصفح للفحوصات E2E، شخّص خوادم التطوير، وترقّ تلقائياً إلى Next 16

MCP رسمي من Vercel مركز على تجربة مطوري Next.js. يبحث في وثائق Next.js الرسمية، ويوفر browser_eval داخل العملية للاختبار، ويكتشف خوادم next dev قيد التشغيل (v16+) ويستدعي نقاط نهاية MCP المدمجة فيها، ويشغّل codemods للترقية إلى Next 16 مع تفعيل مكونات الذاكرة المؤقتة

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

vercel.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "vercel",
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "vercel": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@vercel/next-devtools-mcp"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add vercel -- npx -y @vercel/next-devtools-mcp

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Next.js DevTools

ترقية مشروع Next.js إلى v16 مع codemods موجهة

👤 مهندسو Next.js على v14/v15 ⏱ ~60 min advanced

متى تستخدمه: كنت تؤجل ترقية Next 16. تريد وكيلاً يشغّل codemods ويصحح هجرات API غير المتزامنة

المتطلبات الأساسية
  • مشروع Next.js على v14+ — تحقق من package.json
  • شجرة عمل git نظيفة — git status يظهر نظيفة — حتى تتمكن من الرجوع إذا لزم الأمر
الخطوات
  1. شغّل أداة الترقية
    شغّل upgrade_nextjs_16 على هذا المشروع. أرشدني خلال كل codemod قبل التطبيق✓ تم النسخ
    → قائمة بالتغييرات المخطط لها مع diffs للمعاينة
  2. أصلح مواقع استدعاء API غير المتزامنة
    بعد codemods، ابنِ المشروع. بالنسبة لأي أخطاء من cookies()/headers() غير المتزامنة الآن، أصلح مواقع الاستدعاء لاستخدام await✓ تم النسخ
    → البناء ينجح
  3. فعّل مكونات الذاكرة المؤقتة
    شغّل enable_cache_components. أصلح أي أخطاء حدودية يبلغ عنها✓ تم النسخ
    → مكونات الذاكرة المؤقتة مفعلة، التطبيق يعمل

النتيجة: مشروع Next 16 عامل مع مكونات الذاكرة المؤقتة، في جلسة واحدة مركزة بدلاً من أسبوع متناثر

المزالق
  • لا يمكن لـ codemods إصلاح استخدام async مخصص النمط — شغّل البناء بعد كل خطوة codemod؛ أصلح يدويًا عندما يضع codemod علامات 'REVIEW' على التعليقات
  • قد لا تكون المكتبات من الطرف الثالث جاهزة لـ Next 16 — تحقق من توافق الحزم قبل الترقية؛ ثبّت أي مكتبة مكسورة وأرسل مشكلة upstream
اجمعها مع: git

صحّح خادم Next قيد التشغيل عبر نقاط النهاية التشخيصية الخاصة به

👤 مهندسو Next.js على v16+ ⏱ ~20 min advanced

متى تستخدمه: خادم next dev يعمل لكن هناك شيء غير صحيح (hydration غريب، وضع عرض خاطئ). يعرض Next 16+ أدوات runtime عبر /_next/mcp

المتطلبات الأساسية
  • خادم تطوير Next.js 16+ قيد التشغيل — npm run dev
الخطوات
  1. اكتشف الخادم
    شغّل nextjs_index للعثور على خوادم Next المحلية وإدراج أدوات التشخيص التي تعرضها✓ تم النسخ
    → المنفذ + قائمة الأدوات
  2. استدعِ أدوات التشخيص
    استخدم nextjs_call على المنفذ <PORT> للحصول على شجرة المسار وأوضاع العرض لـ /dashboard. هل هي ثابتة أم ديناميكية أم جزئية؟✓ تم النسخ
    → وضع العرض لكل مسار مع شرح
  3. أصلح العرض السيء
    تستخدم صفحة /dashboard cookies() مما يجعلها ديناميكية بالكامل عندما كنت أريد partial prerendering. ابحث عن الاستيراد المذنب وأعد الهيكلة لعزله✓ تم النسخ
    → وضع العرض يتغير إلى الجزئي بعد الإصلاح

النتيجة: رؤية إلى قرارات عرض Next بدون قراءة 20 مدونة

المزالق
  • يختلف تشخيص خادم التطوير عن إخراج بناء الإنتاج — تحقق دائماً بـ next build — وضع التطوير له إعدادات افتراضية مختلفة

احصل على إجابات موثوقة على أسئلة Next.js

👤 مطورو Next.js في أي مستوى ⏱ ~10 min beginner

متى تستخدمه: لديك سؤال حول سلوك Next.js. لا تريد هلوسات LLM — تريد اقتباساً

الخطوات
  1. ابحث في الوثائق
    استخدم nextjs_docs للعثور على الإرشادات الرسمية حول middleware مقابل route handlers للمصادقة. أرجع الأقسام المطابقة✓ تم النسخ
    → أقسام موثقة مع URLs
  2. أجب مع الاقتباسات
    بناءً على تلك الأقسام فقط، أي واحد يجب أن أستخدمه للتحقق من صحة JWT في تطبيق Next 16 الخاص بي، ولماذا؟ قم بتضمين URLs الوثائق✓ تم النسخ
    → إجابة مؤسسة مع URLs
  3. طبّق على الكود الخاص بي
    تطرّق عبر تطبيقي الحالي في middleware.ts. هل يتوافق مع توصيات الوثائق؟✓ تم النسخ
    → قائمة فجوات محددة

النتيجة: قرارات Next.js موثوقة مدعومة بالوثائق، وليس بالمشاعر

المزالق
  • الوثائق تتخلف عن أحدث إصدار لبضعة أسابيع بعد الإطلاق — بالنسبة للميزات الحديثة جداً، تحقق أيضاً من RFC / مدونات Next.js

شغّل فحص E2E على تطبيق Next.js الخاص بك

👤 مهندسو Next.js ⏱ ~10 min intermediate

متى تستخدمه: لقد أجريت للتو تغييراً. تريد اختبار دخان سريع قبل الالتزام

الخطوات
  1. تصفح والتقط
    استخدم browser_eval لفتح http://localhost:3000/pricing. قم بأخذ لقطة شاشة والتقط أي أخطاء في وحدة التحكم✓ تم النسخ
    → لقطة شاشة + ملخص وحدة التحكم
  2. انقر عبر المسار الحرج
    انقر على 'اختر خطة Pro'، تحقق من فتح modal الدفع برسم السعر الصحيح. قم بأخذ لقطة شاشة لكل خطوة✓ تم النسخ
    → نجح/فشل لكل خطوة
  3. أبلغ
    ملخص: موافق / مكسور / مريب. إذا فشل أي شيء، الصق خطأ وحدة التحكم✓ تم النسخ
    → قرار الشحن أم لا

النتيجة: فحص سريع للعقل يتم تضمينه في حلقة التطوير الخاصة بك — لا حاجة إلى مشغّل Playwright منفصل

المزالق
  • browser_eval هو Playwright-lite — وليس بديلاً لمجموعة E2E الكاملة — استخدم للفحوصات السريعة؛ احتفظ بمجموعة Playwright حقيقية لبوابات الإصدار
اجمعها مع: playwright

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

vercel + playwright

browser_eval للفحوصات السريعة، Playwright لمجموعات الانحدار الكاملة

اختبر دخان /pricing مع browser_eval. إذا نجح، شغّل مجموعة Playwright على المسارات الحرجة✓ تم النسخ
vercel + git

ترقّ Next، التزم في كل خطوة

شغّل upgrade_nextjs_16. بعد كل codemod، التزم بـ diff برسالة وصفية حتى نتمكن من التقسيم إذا كسر شيء ما✓ تم النسخ
vercel + sentry

رصد ما بعد الترقية

انشر بناء Next 16 إلى التدريج. راقب Sentry لمدة 24 ساعة وأشر إلى أي أخطاء جديدة قدمتها هجرة API غير المتزامنة✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
init أول استدعاء في محادثة جديدة free
nextjs_docs query أي سؤال واقعي عن Next.js free
browser_eval actions (navigate, click, screenshot, etc.) اختبارات E2E سريعة لخادم التطوير الخاص بك free (local browser)
nextjs_index اكتشف خوادم تطوير Next 16+ free
nextjs_call port, tool_name, args استدعِ تشخيص runtime Next 16+ free
upgrade_nextjs_16 project_path مسار الترقية من v14/15 إلى v16 free
enable_cache_components project_path فعّل مكونات الذاكرة المؤقتة في تطبيق v16 free

التكلفة والحدود

تكلفة التشغيل

حصة API
مجاني — التنفيذ المحلي + البحث في الوثائق
الرموز لكل استدعاء
قد تكون إرجاعات الوثائق كبيرة؛ عيّن حد على البحث
التكلفة المالية
مجاني
نصيحة
شغّل init مرة واحدة لكل جلسة حتى يعرف الوكيل الأدوات المتاحة — يوفر محاولة عشوائية وخطأ

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: بلا — أداة محلية
نقل البيانات الخارجي: نتائج البحث في الوثائق تصل إلى vercel.com؛ browser_eval يذهب حيث تتصفح؛ المقاييس إلى vercel (اختر عدم المشاركة عبر NEXT_TELEMETRY_DISABLED)

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

nextjs_index لم يجد أي خوادم

فقط خوادم تطوير Next.js 16+ تعرض /_next/mcp. ترقّ أولاً، أو استخدم browser_eval للإصدارات الأقدم

تحقق: curl http://localhost:3000/_next/mcp
browser_eval فشل في الإطلاق

ثنائيات Playwright مفقودة. شغّل npx playwright install مرة واحدة

ترك Codemod الملفات في حالة ترحيل نصف

ارجع عبر git، ثم شغّل codemods واحداً تلو الآخر بدلاً من الكل في المرة. التزم بينهما

nextjs_docs ترجع نتائج غير ذات صلة

أضف الإصدار الرئيسي من Next.js إلى استعلامك: 'app router middleware in Next 16' بدلاً من 'middleware' فقط

البدائل

Next.js DevTools مقابل البدائل

البديلمتى تستخدمهاالمقايضة
Playwright MCPتحتاج إلى Playwright الكاملة، وليس browser_eval الخفيفةأقوى لكن بدون تشخيصات محددة Next.js أو بحث في الوثائق
Cloud Run MCPتنشر إلى GCP، وليس Vercelنموذج استضافة مختلف؛ هذا MCP يركز على تجربة مطوري Next.js، وليس التركيز على النشر

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills