فعال‌سازی MCP Server در Next.js – اتصال عامل‌های هوشمند به محیط توسعه و ساختار پروژه

مقدمه

پروتکل Model Context Protocol (MCP) یک استاندارد باز است که به عامل‌های هوشمند اجازه می‌دهد با اپلیکیشن‌های شما از طریق یک رابط استاندارد تعامل داشته باشند. Next.js نسخه 16 به بعد از MCP پشتیبانی می‌کند و امکان اتصال real-time به ساختار داخلی پروژه را فراهم می‌سازد.

شروع کار

پیش‌نیاز: استفاده از Next.js نسخه 16 یا بالاتر

در ریشه پروژه، فایل .mcp.json را ایجاد کرده و تنظیم زیر را اضافه کنید:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

با اجرای npm run devnext-devtools-mcp به‌صورت خودکار به سرور توسعه شما متصل می‌شود.

قابلیت‌ها

ابزار next-devtools-mcp مجموعه‌ای از قابلیت‌های در حال گسترش را برای عامل‌های کدنویسی فراهم می‌کند:

• دسترسی به Runtime اپلیکیشن
• تشخیص خطاهای build، runtime و type
• پرس‌وجوی وضعیت زنده اپلیکیشن
• دریافت متادیتای صفحات و کامپوننت‌ها
• بررسی Server Actions و سلسله‌مراتب کامپوننت‌ها
• دسترسی به لاگ‌های توسعه

ابزارهای توسعه

• پایگاه دانش Next.js
• ابزارهای مهاجرت و ارتقاء نسخه با codemod
• راهنمای تنظیم Cache Components
• تست مرورگر با Playwright MCP

جریان کاری توسعه

1. اجرای سرور توسعه با npm run dev
2. اتصال خودکار عامل هوشمند به سرور Next.js
3. باز کردن اپلیکیشن در مرورگر
4. پرس‌وجو از عامل برای دریافت بینش و تشخیص‌ها

ابزارهای قابل استفاده توسط عامل‌ها

• get_errors: دریافت خطاهای فعلی
• get_logs: مسیر فایل لاگ توسعه
• get_page_metadata: اطلاعات صفحات و کامپوننت‌ها
• get_project_metadata: ساختار پروژه و URL سرور
• get_server_action_by_id: یافتن Server Action بر اساس شناسه

مزایای توسعه با عامل‌های هوشمند

• پیشنهادهای مبتنی بر ساختار پروژه
• دسترسی به وضعیت زنده اپلیکیشن
• درک دقیق از layout صفحات App Router
• تولید کد مطابق با الگوهای پروژه

مثال‌ها

تشخیص خطا

مثلاً بپرسید: «چه خطاهایی در اپلیکیشن من وجود دارد؟»

عامل از طریق MCP به سرور متصل شده، خطاها را دریافت کرده و راهکارهای اصلاحی ارائه می‌دهد.

ارتقاء نسخه و مفاهیم Next.js

مثلاً بپرسید: «کمکم کن اپلیکیشنم رو به Next.js 16 ارتقاء بدم»

عامل نسخه فعلی را بررسی کرده، ابزارهای codemod را اجرا می‌کند و مراحل مهاجرت را راهنمایی می‌کند.

پرسش‌های مفهومی

مثلاً بپرسید: «چه زمانی باید از 'use client' در App Router استفاده کنم؟»

عامل از پایگاه دانش Next.js استفاده کرده و پاسخ مستند ارائه می‌دهد.

نحوهٔ عملکرد

Next.js 16+ شامل یک MCP endpoint داخلی در مسیر /_next/mcp است. ابزار next-devtools-mcp به‌صورت خودکار این endpoint را کشف کرده و ارتباط برقرار می‌کند. این معماری باعث می‌شود عامل‌ها بتوانند به چندین پروژه Next.js به‌صورت همزمان متصل شوند.

رفع اشکال اتصال MCP

• اطمینان از استفاده از Next.js نسخه 16 یا بالاتر
• بررسی تنظیمات .mcp.json
• اجرای مجدد npm run dev در صورت نیاز
• بررسی اینکه عامل هوشمند تنظیم MCP را بارگذاری کرده باشد

جمع‌بندی

با فعال‌سازی MCP در Next.js، می‌توانید عامل‌های هوشمند را به محیط توسعه خود متصل کرده و از قابلیت‌هایی مانند تشخیص خطا، تحلیل ساختار پروژه، و تولید کد هوشمند بهره‌مند شوید. این ابزار مسیر توسعه را سریع‌تر، دقیق‌تر و هوشمندتر می‌کند.