{"id":"b8240511-460d-4e60-a2f7-92e9938a90e9","shortId":"SB2pGE","kind":"skill","title":"nextjs-best-practices","tagline":"Next.js App Router principles. Server Components, data fetching, routing patterns.","description":"# Next.js Best Practices\n\n> Principles for Next.js App Router development.\n\n---\n\n## 1. Server vs Client Components\n\n### Decision Tree\n\n```\nDoes it need...?\n│\n├── useState, useEffect, event handlers\n│   └── Client Component ('use client')\n│\n├── Direct data fetching, no interactivity\n│   └── Server Component (default)\n│\n└── Both? \n    └── Split: Server parent + Client child\n```\n\n### By Default\n\n| Type | Use |\n|------|-----|\n| **Server** | Data fetching, layout, static content |\n| **Client** | Forms, buttons, interactive UI |\n\n---\n\n## 2. Data Fetching Patterns\n\n### Fetch Strategy\n\n| Pattern | Use |\n|---------|-----|\n| **Default** | Static (cached at build) |\n| **Revalidate** | ISR (time-based refresh) |\n| **No-store** | Dynamic (every request) |\n\n### Data Flow\n\n| Source | Pattern |\n|--------|---------|\n| Database | Server Component fetch |\n| API | fetch with caching |\n| User input | Client state + server action |\n\n---\n\n## 3. Routing Principles\n\n### File Conventions\n\n| File | Purpose |\n|------|---------|\n| `page.tsx` | Route UI |\n| `layout.tsx` | Shared layout |\n| `loading.tsx` | Loading state |\n| `error.tsx` | Error boundary |\n| `not-found.tsx` | 404 page |\n\n### Route Organization\n\n| Pattern | Use |\n|---------|-----|\n| Route groups `(name)` | Organize without URL |\n| Parallel routes `@slot` | Multiple same-level pages |\n| Intercepting `(.)` | Modal overlays |\n\n---\n\n## 4. API Routes\n\n### Route Handlers\n\n| Method | Use |\n|--------|-----|\n| GET | Read data |\n| POST | Create data |\n| PUT/PATCH | Update data |\n| DELETE | Remove data |\n\n### Best Practices\n\n- Validate input with Zod\n- Return proper status codes\n- Handle errors gracefully\n- Use Edge runtime when possible\n\n---\n\n## 5. Performance Principles\n\n### Image Optimization\n\n- Use next/image component\n- Set priority for above-fold\n- Provide blur placeholder\n- Use responsive sizes\n\n### Bundle Optimization\n\n- Dynamic imports for heavy components\n- Route-based code splitting (automatic)\n- Analyze with bundle analyzer\n\n---\n\n## 6. Metadata\n\n### Static vs Dynamic\n\n| Type | Use |\n|------|-----|\n| Static export | Fixed metadata |\n| generateMetadata | Dynamic per-route |\n\n### Essential Tags\n\n- title (50-60 chars)\n- description (150-160 chars)\n- Open Graph images\n- Canonical URL\n\n---\n\n## 7. Caching Strategy\n\n### Cache Layers\n\n| Layer | Control |\n|-------|---------|\n| Request | fetch options |\n| Data | revalidate/tags |\n| Full route | route config |\n\n### Revalidation\n\n| Method | Use |\n|--------|-----|\n| Time-based | `revalidate: 60` |\n| On-demand | `revalidatePath/Tag` |\n| No cache | `no-store` |\n\n---\n\n## 8. Server Actions\n\n### Use Cases\n\n- Form submissions\n- Data mutations\n- Revalidation triggers\n\n### Best Practices\n\n- Mark with 'use server'\n- Validate all inputs\n- Return typed responses\n- Handle errors\n\n---\n\n## 9. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| 'use client' everywhere | Server by default |\n| Fetch in client components | Fetch in server |\n| Skip loading states | Use loading.tsx |\n| Ignore error boundaries | Use error.tsx |\n| Large client bundles | Dynamic imports |\n\n---\n\n## 10. Project Structure\n\n```\napp/\n├── (marketing)/     # Route group\n│   └── page.tsx\n├── (dashboard)/\n│   ├── layout.tsx   # Dashboard layout\n│   └── page.tsx\n├── api/\n│   └── [resource]/\n│       └── route.ts\n└── components/\n    └── ui/\n```\n\n---\n\n> **Remember:** Server Components are the default for a reason. Start there, add client only when needed.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["nextjs","best","practices","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-nextjs-best-practices","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/nextjs-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 35034 github stars · SKILL.md body (3,863 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T12:51:06.258Z","embedding":null,"createdAt":"2026-04-18T20:27:21.686Z","updatedAt":"2026-04-25T12:51:06.258Z","lastSeenAt":"2026-04-25T12:51:06.258Z","tsv":"'-160':255 '-60':251 '1':24 '10':355 '150':254 '2':71 '3':114 '4':157 '404':134 '5':194 '50':250 '6':231 '60':285 '7':262 '8':295 '9':320 'above-fold':205 'action':113,297,401 'add':384 'analyz':227,230 'anti':322 'anti-pattern':321 'api':104,158,368 'app':6,21,358 'applic':395 'ask':439 'automat':226 'base':88,223,283 'best':3,16,176,306 'blur':209 'boundari':132,347,447 'build':83 'bundl':214,229,352 'button':68 'cach':81,107,263,265,291 'canon':260 'case':299 'char':252,256 'child':55 'clarif':441 'clear':414 'client':27,38,41,54,66,110,328,335,351,385 'code':185,224 'compon':10,28,39,48,102,201,220,336,371,375 'config':277 'content':65 'control':268 'convent':118 'creat':168 'criteria':450 'dashboard':363,365 'data':11,43,61,72,96,166,169,172,175,272,302 'databas':100 'decis':29 'default':49,57,79,332,378 'delet':173 'demand':288 'describ':402,418 'descript':253 'develop':23 'direct':42 'dynam':93,216,235,243,353 'edg':190 'environ':430 'environment-specif':429 'error':131,187,319,346 'error.tsx':130,349 'essenti':247 'event':36 'everi':94 'everywher':329 'execut':397 'expert':435 'export':239 'fetch':12,44,62,73,75,103,105,270,333,337 'file':117,119 'fix':240 'flow':97 'fold':207 'form':67,300 'full':274 'generatemetadata':242 'get':164 'grace':188 'graph':258 'group':141,361 'handl':186,318 'handler':37,161 'heavi':219 'ignor':345 'imag':197,259 'import':217,354 'input':109,179,314,444 'interact':46,69 'intercept':154 'isr':85 'larg':350 'layer':266,267 'layout':63,126,366 'layout.tsx':124,364 'level':152 'limit':406 'load':128,341 'loading.tsx':127,344 'mark':308 'market':359 'match':415 'metadata':232,241 'method':162,279 'miss':452 'modal':155 'multipl':149 'mutat':303 'name':142 'need':33,388 'next.js':5,15,20 'next/image':200 'nextj':2 'nextjs-best-practic':1 'no-stor':90,292 'not-found.tsx':133 'on-demand':286 'open':257 'optim':198,215 'option':271 'organ':137,143 'output':424 'overlay':156 'overview':405 'page':135,153 'page.tsx':121,362,367 'parallel':146 'parent':53 'pattern':14,74,77,99,138,323 'per':245 'per-rout':244 'perform':195 'permiss':445 'placehold':210 'possibl':193 'post':167 'practic':4,17,177,307 'principl':8,18,116,196 'prioriti':203 'project':356 'proper':183 'provid':208 'purpos':120 'put/patch':170 'read':165 'reason':381 'refresh':89 'rememb':373 'remov':174 'request':95,269 'requir':443 'resourc':369 'respons':212,317 'return':182,315 'revalid':84,278,284,304 'revalidate/tags':273 'revalidatepath/tag':289 'review':436 'rout':13,115,122,136,140,147,159,160,222,246,275,276,360 'route-bas':221 'route.ts':370 'router':7,22 'runtim':191 'safeti':446 'same-level':150 'scope':417 'server':9,25,47,52,60,101,112,296,311,330,339,374 'set':202 'share':125 'size':213 'skill':393,409 'skill-nextjs-best-practices' 'skip':340 'slot':148 'sourc':98 'source-sickn33' 'specif':431 'split':51,225 'start':382 'state':111,129,342 'static':64,80,233,238 'status':184 'stop':437 'store':92,294 'strategi':76,264 'structur':357 'submiss':301 'substitut':427 'success':449 'tag':248 'task':413 'test':433 'time':87,282 'time-bas':86,281 'titl':249 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':422 'tree':30 'trigger':305 'type':58,236,316 'ui':70,123,372 'updat':171 'url':145,261 'use':40,59,78,139,163,189,199,211,237,280,298,310,327,343,348,391,407 'useeffect':35 'user':108 'usest':34 'valid':178,312,432 'vs':26,234 'without':144 'workflow':399 'zod':181","prices":[{"id":"d68bda99-153c-4d4f-9161-73a40c86d1fe","listingId":"b8240511-460d-4e60-a2f7-92e9938a90e9","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:27:21.686Z"}],"sources":[{"listingId":"b8240511-460d-4e60-a2f7-92e9938a90e9","source":"github","sourceId":"sickn33/antigravity-awesome-skills/nextjs-best-practices","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices","isPrimary":false,"firstSeenAt":"2026-04-18T21:41:24.280Z","lastSeenAt":"2026-04-25T12:51:06.258Z"},{"listingId":"b8240511-460d-4e60-a2f7-92e9938a90e9","source":"skills_sh","sourceId":"sickn33/antigravity-awesome-skills/nextjs-best-practices","sourceUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/nextjs-best-practices","isPrimary":true,"firstSeenAt":"2026-04-18T20:27:21.686Z","lastSeenAt":"2026-04-25T12:40:16.009Z"}],"details":{"listingId":"b8240511-460d-4e60-a2f7-92e9938a90e9","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"nextjs-best-practices","github":{"repo":"sickn33/antigravity-awesome-skills","stars":35034,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-25T06:33:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"5f9c35cb9ba7219a6d0b93dfe3921132a31d05e7","skill_md_path":"skills/nextjs-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"nextjs-best-practices","description":"Next.js App Router principles. Server Components, data fetching, routing patterns."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/nextjs-best-practices"},"updatedAt":"2026-04-25T12:51:06.258Z"}}