Agent Skills
› NeverSight/learn-skills.dev
› modern-best-practice-nextjs
modern-best-practice-nextjs
GitHub指导使用Next.js App Router构建现代应用的最佳实践，涵盖路由结构、服务端组件数据获取、UI状态管理及SEO元数据配置，强调避免useEffect请求及默认使用服务端组件。
Trigger Scenarios
询问Next.js最佳实践
Next.js App Router开发问题
React Server Components实现
Install
npx skills add NeverSight/learn-skills.dev --skill modern-best-practice-nextjs -g -y
SKILL.md
Frontmatter
{
"name": "modern-best-practice-nextjs",
"description": "Build modern Next.js apps with App Router and best practices"
}
Next.js Best Practices (App Router)
Next.js is a library that changes frequently - use web search or context7 MCP (via DocsExplorer agent) for exploring the current documentation.
Routing & Structure
- Use the App Router in
app/for new work - Use nested layouts and route groups to organize sections
- Keep server components as the default; add
'use client'only where needed
Data Fetching & Caching
- Fetch data in React Server Components - AVOID fetching via
useEffect()andfetch() - Use server actions ("Server Functions") for mutations, potentially in conjunction with React Hooks like
useActionState
UI States
- Provide
loading.tsxanderror.tsxfor route-level UX - Use
Suspenseboundaries around async UI
Metadata & SEO
- Use the Metadata API in layouts and pages
- Prefer static metadata when possible; keep dynamic metadata minimal
Version History
- e0220ca Current 2026-07-05 22:49
