Next.js 文档 MCP 服务器
一个用于访问和搜索Next.js文档的模型上下文协议(MCP)服务器。此包通过一个简单的接口提供对Next.js文档的程序化访问。
特点/特性
- 🔍 看起来像是一个放大镜的符号,常用于表示搜索、查看细节等意思。在中文里,可以简单地翻译为“🔍(放大镜)”或者根据上下文翻译为“查看”、“搜索”等意思。但直接作为一个符号使用时,通常保留其图形形式。 搜索文档使用自然语言查询搜索 Next.js 文档
- 📖(这个符号本身没有直接的中文翻译,它通常代表“书”或“书籍”的意思,在上下文中可以理解为“书”或“书籍”。) 全页访问通过URL检索完整的文档页面
- 💡(灯泡图标,常用于表示灵感、想法或创意) 最佳实践获取针对特定Next.js主题的最佳实践指南
- 📊 表格/数据图表 缓存统计信息监控缓存性能和统计信息
- 🔄 旋转符号(表示循环、重复或进行中的动作) 智能缓存文档被缓存,且有大小限制和过期时间(6小时)
- ⚡(闪电符号,常用于表示速度、活力、快速或电力等概念,在中文中无直接对应文字,通常保留原符号或根据上下文翻译为“闪电”、“迅速”等) 性能优化并发抓取与高效搜索算法
- 🔒 翻译为中文是:锁定/安全/保密 安全增强限制速率(每分钟30次请求)以防止滥用
- 🌐 表示“互联网”或“网络”的符号。 全面覆盖涵盖了Next.js文档的所有主要部分,包括:
- 入门指南 - App 路由器 - 页面路由器 - API 参考文档 - 函数 - 优化 - 安全 - 高级主题
快速安装
选择您的平台:
克劳德代码终端(Windows):
由于Windows系统特有的问题 claude mcp add 命令,使用这个自动化安装程序:
npx @aalhommada/nextjs-docs-mcp install-claude或者手动运行此 PowerShell 命令:
powershell -ExecutionPolicy Bypass -Command "$config = Get-Content '$env:USERPROFILE\.claude.json' | ConvertFrom-Json; $projectPath = (Get-Location).Path; if (-not $config.projects.$projectPath) { $config.projects | Add-Member -NotePropertyName $projectPath -NotePropertyValue @{allowedTools=@(); history=@(); mcpContextUris=@(); mcpServers=@{}; enabledMcpjsonServers=@(); disabledMcpjsonServers=@(); hasTrustDialogAccepted=$false} }; $config.projects.$projectPath.mcpServers.'nextjs-docs' = @{type='stdio'; command='cmd'; args=@('/c', 'npx', '-y', '@aalhommada/nextjs-docs-mcp'); env=@{}}; $config | ConvertTo-Json -Depth 100 | Set-Content '$env:USERPROFILE\.claude.json'; Write-Host 'MCP installed! Run: claude mcp list'"克劳德代码终端(Mac/Linux):
claude mcp add --transport stdio nextjs-docs -- npx -y @aalhommada/nextjs-docs-mcpVS Code(克林): 在 settings.json 中添加:
{
"mcp.servers": {
"nextjs-docs": {
"command": "npx",
"args": ["-y", "@aalhommada/nextjs-docs-mcp"]
}
}
}光标: 添加到MCP设置中:
{
"mcpServers": {
"nextjs-docs": {
"command": "npx",
"args": ["-y", "@aalhommada/nextjs-docs-mcp"]
}
}
}要求
- Node.js 版本 >= 20.0
使用方法/用途
这个软件包提供了一个MCP服务器,可以与Claude或其他支持模型上下文协议(Model Context Protocol)的AI助手工具一起使用。
可用工具
- 搜索 Next.js 文档
- 在 Next.js 文档中搜索相关信息 - 输入: query (字符串)
- 获取Next.js页面
- 获取特定Next.js文档页面的完整内容 - 输入: url (字符串)
- 获取Next.js最佳实践
- 获取特定主题的当前Next.js最佳实践 - 输入: topic (字符串)
- 获取Next.js缓存统计信息
- 获取文档缓存的统计数据 - 输入:无
与Claude代码终端一起使用
Windows:
npx @aalhommada/nextjs-docs-mcp install-claudeMac/Linux:
claude mcp add --transport stdio nextjs-docs -- npx -y @aalhommada/nextjs-docs-mcp验证其是否正常工作:
claude mcp list现在,你可以在任何对话中向Claude提出关于Next.js文档的问题:
- “如何在Next.js中实现服务器端渲染?”
- “给我展示数据获取的最佳实践”
- “App Router 的最新功能有哪些?”
与 VS Code(Cline 扩展)一起使用
- 从VS Code市场安装Cline扩展
- 通过按下(快捷键)打开 VS Code 设置(JSON)
Ctrl+Shift+P(或者Cmd+Shift+P在Mac上,搜索“偏好设置:打开用户设置(JSON)”
- 将此MCP服务器配置添加到您的设置中:
{
"mcp.servers": {
"nextjs-docs": {
"command": "npx",
"args": ["-y", "@aalhommada/nextjs-docs-mcp"],
"transport": "stdio"
}
}
}- 重启 VS Code,当你使用 Cline 时,MCP 服务器将自动连接
现在,您可以直接在Cline聊天中询问关于Next.js的文档问题!
与光标一起使用
- 打开光标设置:
Cursor > Settings > Cursor Settings(或按压Ctrl+Shift+J/Cmd+Shift+J)
- 点击“模型”选项卡,向下滚动找到“MCP 设置”
- 将此配置添加到您的MCP设置中:
{
"mcpServers": {
"nextjs-docs": {
"command": "npx",
"args": ["-y", "@aalhommada/nextjs-docs-mcp"]
}
}
}- 重启光标后,MCP服务器将自动连接
现在你可以在Cursor的聊天中提问:
- “如何在 Next.js 14 中设置中间件?”
- “给我展示一些API路由的例子”
- “图像优化的最佳实践是什么?”
快速入门(使用 npx)
你也可以直接运行MCP服务器,无需安装:
npx @aalhommada/nextjs-docs-mcp这对于测试或一次性使用非常有用。
发展
- 克隆仓库:
git clone https://github.com/aalhommada/nextjs-docs-mcp.git
cd nextjs-docs-mcp- 安装依赖项:
npm install- 构建项目:
npm run build- 启动服务器:
npm start性能与安全特性
缓存策略
- 文档缓存6小时,并自动刷新
- 最大缓存大小为500页
- 大页面内容截断(100KB限制)
- 在抓取失败时优雅降级
速率限制
- 每分钟每个客户端30个请求
- 计数器的自动复位
- 超出限制时显示明确的错误信息
错误处理
- 针对网络问题的全面错误处理
- 当抓取失败时,回退到使用陈旧缓存
- 详细的日志记录用于调试
技术细节
- 使用TypeScript构建,确保类型安全
- 使用 cheerio 进行 HTML 解析
- 实现高效的缓存机制
- 遵循MCP服务器规范
- 设计时即考虑安全性,实施速率限制
许可证
麻省理工学院(MIT)
作者
阿卜杜拉·阿尔霍马达
做出贡献
欢迎贡献!请随时提交拉取请求。
