mcpField
M
modern-best-practice-nextjs

modern-best-practice-nextjs

github.com/academind开发1166 次安装40 周前更新
代码仓库

关于 modern-best-practice-nextjs

面向编码 Agent 的 Next.js App Router 实践指南，涵盖路由、数据获取、界面状态和元数据。鉴于 Next.js 更新频繁，指南建议查阅最新文档。

主要功能

  1. 01App Router 路由与布局
  2. 02默认使用 Server Components
  3. 03使用 Server Actions 修改数据
  4. 04配置加载与错误状态
  5. 05Metadata API 与 SEO 指南

适用场景

  1. 01启动 Next.js App Router 项目
  2. 02划分服务端与客户端组件
  3. 03为路由添加加载和错误处理
  4. 04配置页面 SEO 元数据

安装

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

$npx skills add https://github.com/academind/ai-config --skill modern-best-practice-nextjs

安装后在 Claude Code 中输入/modern-best-practice-nextjs确认已加载。

详细介绍

Next.js 最佳实践（App Router）

Next.js 是一个经常变化的库——请使用网页搜索或 context7 MCP（通过 DocsExplorer agent）查阅最新文档。

路由与结构

  • 新项目请使用 app/ 中的 App Router
  • 使用嵌套布局和路由组来组织各个部分
  • 默认使用服务端组件；仅在需要时添加 'use client'

数据获取与缓存

  • 在 React 服务端组件中获取数据——避免通过 useEffect() 和 fetch() 获取数据
  • 使用服务端操作（“Server Functions”）进行变更，也可以结合 useActionState 等 React Hooks 使用

UI 状态

  • 为路由级用户体验提供 loading.tsx 和 error.tsx
  • 在异步 UI 周围使用 Suspense 边界

元数据与 SEO

  • 在布局和页面中使用 Metadata API
  • 尽可能优先使用静态元数据；尽量减少动态元数据

评论

支持 Markdown