mcpField
N
next

next

github.com/hairyf开发26856 次安装2 周前更新
代码仓库

关于 next

介绍用于构建全栈 Web 应用的 React 框架 Next.js，并按路由、组件、数据获取、缓存、Server Actions、文件约定和内置组件整理参考资料。

主要功能

  1. 01基于文件系统的路由
  2. 02Server 和 Client Components
  3. 03数据获取与流式传输
  4. 04缓存与重新验证
  5. 05Server Actions 和文件约定

适用场景

  1. 01规划路由与布局
  2. 02选择服务端或客户端数据获取方式
  3. 03处理加载、错误和数据更新

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hairyf/skills --skill next

安装后在 Claude Code 中输入/next确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

GENERATION.md
references/
api-components.mdx
caching-revalidation.mdx
core-navigation.mdx
core-routing.mdx
core-server-client-components.mdx
data-fetching-client.mdx
data-fetching-server.mdx
data-streaming.mdx
file-conventions-dynamic-routes.mdx
file-conventions-loading-error.mdx
server-actions.mdx

详细介绍

Next.js 是一个用于构建全栈 Web 应用的 React 框架。它提供基于文件系统的路由、Server Components、自动代码分割、图片优化以及内置性能优化。Next.js 同时支持静态站点生成（SSG）和服务端渲染（SSR），是构建现代 Web 应用的理想选择。

该技能基于 Next.js v16.2.0-canary.16，生成于 2026-01-30。

核心参考

主题描述参考
基于文件系统的路由通过文件夹结构、布局和页面定义路由core-routing
Server 和 Client Components了解何时使用 Server Components 与 Client Componentscore-server-client-components
导航链接、预取和客户端过渡core-navigation

数据获取

主题描述参考
Server Components在 Server Components 中使用 fetch、ORM 和数据库获取数据data-fetching-server
Client Components在 Client Components 中使用 use 钩子和第三方库获取数据data-fetching-client
流式传输使用 Suspense 和 loading.tsx 流式传输数据和组件data-streaming

缓存与重新验证

主题描述参考
缓存策略缓存 fetch 请求、缓存标记和重新验证caching-revalidation

Server Actions

主题描述参考
Server Functions创建并使用 Server Actions 进行数据变更server-actions

文件约定

主题描述参考
动态路由动态段、全捕获路由和路由参数file-conventions-dynamic-routes
加载与错误使用 loading.tsx 和 error.tsx 处理加载状态和错误file-conventions-loading-error

API 参考

主题描述参考
内置组件Link、Image、Script 和 Font 组件api-components

评论

支持 Markdown