zed -nextjs

This MCP server adds Next.js DevTools capabilities to Zed via the Next.js DevTools MCP extension. It provides access to Next.js documentation and best practices, automated upgrade tools for upgrading to Next.js 16+, a cache components workflow, and integrated browser testing with Playwright. It also offers real-time diagnostics from a Next.js development server (requires Next.js 16+). In Zed, you’ll find the MCP server in the Agent Panel after installation, where you can invoke prompts like asking for upgrade guidance, exploring Next.js routing structures, or enabling cache components in your project. Use the documented prompts to query docs, trigger codemods for upgrades, configure caching behavior, and run automated Playwright tests to validate changes.

Prerequisites:

• Node.js v20.19 or newer
• npm or pnpm
• A Next.js project (optional but recommended for full features)

Installation steps:

1. Ensure Node.js and npm/pnpm are installed on your system.
2. Install the MCP server via the Zed Extensions marketplace:
   • Open Zed, press Cmd/Ctrl+Shift+P, choose Extensions: Install Extensions, and search for "Next.js DevTools MCP".
   • Install the extension to enable the MCP server inside Zed.
3. If you are developing the MCP locally, clone the repository and install dependencies:
   • git clone <repository-url>
   • cd zed-extension/
   • npm install (or pnpm install)
4. Run or attach the MCP server within Zed via the Extensions panel. If you are testing locally, you can also run using npx as described in the mcp_config section.

Optional Dev Extension setup (for development):

1. Clone this repository and open it in Zed.
2. Press Cmd/Ctrl+Shift+P and select Extensions: Install Dev Extension.
3. Point to the zed-extension directory to load the dev extension build.

• This MCP extension relies on Next.js 16+ features for full runtime diagnostics.
• You can trigger automated Next.js 16 upgrades using the built-in Upgrade Tools.
• Enable Browser Testing integration with Playwright to run automated tests against your Next.js app.
• If you encounter issues with extensions loading, check Zed logs via Cmd/Ctrl+Shift+P → Zed: Open Log.
• The environment variables block in mcp_config is a placeholder for common settings; adjust according to your deployment needs (e.g., API keys, debug flags).
• The npm package referenced is next-devtools-mcp; ensure compatibility with your project setup before upgrading.