# React Next Best Practices

React/Next.js 项目最佳实践：组件拆分、数据获取、性能、bundle、RSC、hydration 和路由。

- Repository: https://github.com/OpenBMB/PilotDeck (4947 stars)
- Category: Engineering
- License: AGPL-3.0
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -g -a claude-code -y`
Codex: `npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -g -a codex -y`
Cursor: `npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add OpenBMB/PilotDeck --skill react-next-best-practices -g -a gemini-cli -y`

## Description

React/Next.js 项目最佳实践：组件拆分、数据获取、性能、bundle、RSC、hydration 和路由。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React / Next.js Best Practices

Use this skill when creating, reviewing, or refactoring React or Next.js applications.

## Focus Areas

- Component boundaries: keep components cohesive and avoid unnecessary abstraction.
- Data fetching: avoid waterfalls; keep server/client responsibilities explicit.
- Rendering model: distinguish Server Components, Client Components, SSR, SSG, and dynamic routes.
- State: keep local state local; avoid global state unless shared behavior requires it.
- Performance: watch bundle size, memoization misuse, expensive renders, image loading, and caching.
- Hydration: avoid browser-only values during server render unless guarded.
- Accessibility: use semantic HTML before custom ARIA.
- Testing: prefer targeted tests for changed behavior.

## Review Output

Return concrete findings with file paths, severity, and suggested fixes. Avoid generic advice unless tied to the current code.

## PilotDeck Migration Note

- Source inspiration: Vercel Agent Skills for React/Next.js workflows.
- This is a PilotDeck-native draft, not a verbatim copy and is not Vercel-platform-specific.