Nextjs Best Practices
The nextjs-best-practices skill provides developers with a comprehensive reference guide for building applications using Next.js App Router, covering server and client component patterns, data fetching strategies, routing conventions, and performance optimization techniques. It is intended for developers working with Next.js who need guidance on architectural decisions such as component selection, caching layers, and proper use of server actions. The skill solves the problem of inconsistent implementation patterns by offering decision trees, comparison tables, and specific file conventions for common Next.js development scenarios.
- skills.sh installs
- 6.7K
- GitHub stars
- 43.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add sickn33/antigravity-awesome-skills --skill nextjs-best-practices --agent claude-codeInstalls 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
By Default
| Type | Use |
|---|---|
| Server | Data fetching, layout, static content |
| Client | Forms, buttons, interactive UI |
2. Data Fetching Patterns
Fetch Strategy
| Pattern | Use |
|---|---|
| Default | Version/config dependent; current fetch defaults are uncached |
| Explicit cache | fetch(url, { cache: "force-cache" }) when data may be shared |
| 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
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sickn33/antigravity-awesome-skills
- Category
- Frontend Development
More from sickn33/antigravity-awesome-skills
All 708- Browser Automation5.8K
- Nextjs Supabase Auth5.8K
- Prisma Expert3.8K
- Playwright Skill3.5K
- 3d Web Experience3.4K
- Game Development3.3K
- Software Architecture3.3K
- Product Manager Toolkit3.2K
- Mobile Design3K
- Telegram Bot Builder3K
- Ui Ux Pro Max2.8K
- Bun Development2.5K
- Web Performance Optimization2.4K
- I18n Localization2.3K
- Ui Ux Designer2.3K
- Nestjs Expert2.2K
- Powershell Windows2.2K
- Brainstorming2K
- Api Documentation Generator1.9K
- Frontend Design1.9K
- Senior Architect1.9K
- Cc Skill Security Review1.8K
- Senior Fullstack1.8K
- Agent Memory Systems1.7K
Recommended
More Frontend Development1
premium-frontend-uigithub/awesome-copilotA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.5Kskills.sh installs
premium-frontend-uigithub/awesome-copilotA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.5Kskills.sh installs
3
frontend-devminimax-ai/skillsFull-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds com3.2Kskills.sh installs
frontend-devminimax-ai/skillsFull-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds com3.2Kskills.sh installs4
frontend-skillnexu-io/open-designCreate visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.3.2Kskills.sh installs
frontend-skillnexu-io/open-designCreate visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.3.2Kskills.sh installs5
react-hook-formpproenca/dot-skillsReact Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Wat3.1Kskills.sh installs
react-hook-formpproenca/dot-skillsReact Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Wat3.1Kskills.sh installs6shadcn-uinexu-io/open-designBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.3Kskills.sh installs
shadcn-uinexu-io/open-designBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.3Kskills.sh installs