{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/nextjs-best-practices",
  "version": "1.0.0",
  "name": "Nextjs Best Practices",
  "description": "Next.js App Router principles. Server Components, data fetching, routing patterns.",
  "system_prompt_fragment": "# 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.",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/nextjs-best-practices"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/nextjs-best-practices",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/nextjs-best-practices",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend"
  ],
  "lifecycle": "draft"
}