nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
Profile →npx skills add sickn33/agentic-awesome-skills --skill nextjs-best-practices --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Next.js Best Practices > Principles for Next.js App Router development. --- ## 1. Server vs Client Components ### Decision Tree ``` Does it need...? │ ├── useState, useEffect, event handlers │ └── Client Component ('use client') │ ├── Direct data fetching, no interactivity │ └── Server Component (default) │ └── Both? └── Split: Server parent + Client child ``` ### By Default | Type | Use | |------|-----| | **Server** | Data fetching, layout, static content | | **Client** | Forms, buttons, interactive UI | --- ## 2. Data Fetching Patterns ### Fetch Strategy | Pattern | Use | |---------|-----| | **Default** | Static (cached at build) | | **Revalidate** | ISR (time-based refresh) | | **No-store** | Dynamic (every request) | ### Data Flow | Source | Pattern | |--------|---------| | Database | Server Component fetch | | API | fetch with caching | | User input | Client state + server action | --- ## 3. Routing Principles ### File Conventions | File | Purpose | |------|---------| | `page.tsx` | Route UI | | `layout.tsx` | Shared layout | | `loading.tsx` | Loading state | | `error.tsx` | Error boundary | | `not-found.tsx` | 404 page | ### Route Organization | Pattern | Use | |---------|-
- 1. Server vs Client Components
- Decision Tree
- By Default
- 2. Data Fetching Patterns
- Fetch Strategy
- Data Flow
- 3. Routing Principles
- File Conventions
- Route Organization
- 4. API Routes
- Route Handlers
- Best Practices
- 5. Performance Principles
- Image Optimization
What does the nextjs-best-practices skill do?
Next.js App Router principles. Server Components, data fetching, routing patterns.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill nextjs-best-practices --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.