Nextjs Best Practices

This one keeps you honest about Next.js App Router defaults. It pushes server components first, client components only when you need interactivity, which is the right instinct but easy to forget when you're used to older patterns. The decision trees are useful, especially the server vs client split and the caching layers breakdown. What I like is the anti-patterns section calling out "use client everywhere" because that's exactly what happens when teams migrate without rethinking their approach. The routing conventions table and server actions guidance are solid references when you're setting up new routes or forms. Good for teams transitioning from Pages Router or anyone who keeps reaching for client components out of habit.

skills.sh installs: 632
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill nextjs-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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