[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SW2MGXX0PRCX58TZH631F":3,"skill-same:01M71SW2MGXX0PRCX58TZH631F":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":13,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M71SW2MGXX0PRCX58TZH631F","nextjs-best-practices",null,"Next.js App Router principles. Server Components, data fetching, routing patterns.","javiertarazon\u002Fide-agente-free-jt7-","javiertarazon","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153141207?v=4","01M71R52TB3S9HXKH6WSNT8A7V","01M71R52VG5KS2DKDDH4GDQ30A",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fnextjs-best-practices\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"nextjs","best practices","nextjs best practices","principles","routing","Next.js","patterns","data","edit","write","read","next","server","router","data fetching","Server Components","components","unknown","community","app","2026-11-10 13:02:02",false,"---\nname: nextjs-best-practices\ndescription: \"Next.js App Router principles. Server Components, data fetching, routing patterns.\"\nallowed-tools: Read, Write, Edit, Glob, Grep\nrisk: unknown\nsource: community\n---\n\n# 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\u002FPATCH | 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\u002Fimage 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\u002Ftags |\n| Full route | route config |\n\n### Revalidation\n\n| Method | Use |\n|--------|-----|\n| Time-based | `revalidate: 60` |\n| On-demand | `revalidatePath\u002FTag` |\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\u002F\n├── (marketing)\u002F     # Route group\n│   └── page.tsx\n├── (dashboard)\u002F\n│   ├── layout.tsx   # Dashboard layout\n│   └── page.tsx\n├── api\u002F\n│   └── [resource]\u002F\n│       └── route.ts\n└── components\u002F\n    └── ui\u002F\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","# 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\u002FPATCH | 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\u002Fimage 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\u002Ftags |\n| Full route | route config |\n\n### Revalidation\n\n| Method | Use |\n|--------|-----|\n| Time-based | `revalidate: 60` |\n| On-demand | `revalidatePath\u002FTag` |\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\u002F\n├── (marketing)\u002F     # Route group\n│   └── page.tsx\n├── (dashboard)\u002F\n│   ├── layout.tsx   # Dashboard layout\n│   └── page.tsx\n├── api\u002F\n│   └── [resource]\u002F\n│       └── route.ts\n└── components\u002F\n    └── ui\u002F\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",{"name":5,"risk":40,"source":41,"description":7,"allowed-tools":48},"Read, Write, Edit, Glob, Grep","release\u002Fv4.2.11-panel-pro","a92ea02bcf7e2b3dbaf46d49696c29a3cb490d4f",".github\u002Fskills\u002Fnextjs-best-practices","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-","https:\u002F\u002Fgithub.com\u002Fjaviertarazon","2026-07-12 07:10:45",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add javiertarazon\u002Fide-agente-free-jt7- --skill nextjs-best-practices",{"tool":61,"command":62},"bunx","bunx skills add javiertarazon\u002Fide-agente-free-jt7- --skill nextjs-best-practices",{"tool":64,"command":65},"pnpm","pnpm dlx skills add javiertarazon\u002Fide-agente-free-jt7- --skill nextjs-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fnextjs-best-practices\u002FSKILL.md",true,[],[70,98,125,145,160,181],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":79,"publishedAt":43},"01M71TQ7Q6Z10VWF3C2H5X1KW9","zustand-store-ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reacti...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzustand-store-ts\u002FSKILL.md",[76],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[80,81,82,41,83,84,85,86,87,40,88,89,90,91,92,93,94,95,96,97],"zustand","store","zustand store ts","middleware","implementing","use","react state management","when","react","with","state","create","state management","typescript","action","management","separation","global",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":107,"publishedAt":43},"01M71TQ5EAR40G6W0MV5ZDVEZT","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoom-automation\u002FSKILL.md",[104],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[108,109,110,41,111,112,113,114,115,40,116,117,118,119,120,121,122,123,95,124],"zoom automation","zoom","automation","creation","for","search","schemas","MCP","first","via","meeting","search tools","tracking","webinars","composio","recordings","Tools",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":43},"01M71TQ29B1EYBCEAP1ZBGXQ1A","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoho-crm-automation\u002FSKILL.md",[131],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},[133,134,110,135,136,137,41,138,139,112,140,113,114,141,115,40,142,143,144,91],"crm automation","zoho crm automation","crm","zoho crm","zoho","leads","manage leads","manage","records","convert","tasks","contacts",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":152,"publishedAt":43},"01M71TPZPMN60DH0XV58KVHY23","zendesk-automation","Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzendesk-automation\u002FSKILL.md",[151],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},[153,110,154,41,112,113,114,115,155,40,143,156,157,116,117,158,119,122,124,159],"zendesk automation","zendesk","organizations","replies","users","tickets","automate",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":166,"publishedAt":43},"01M71TPXDWKHKG4N6TVEPXWD0N","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity ...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzapier-make-patterns\u002FSKILL.md",[],[167,168,29,169,170,171,172,173,174,110,175,40,176,177,178,179,180,159],"zapier make patterns","zapier","make","No-Code","complexity","writing","spawner","business","workflow","code","integromat","apache","processes","but",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":190,"publishedAt":43},"01M71TPT5T10WXNKW9G7ZXZ27W","youtube-summarizer","Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fyoutube-summarizer\u002FSKILL.md",[187],{"categoryNo":188,"categoryName":189,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[191,192,193,194,41,195,196,197,198,199,200,201,176,202,203,204,205,206,207,208],"summarizer","youtube","youtube summarizer","Video","content-analysis","frameworks","copilot","2025","github-copilot","extract transcripts","analysis","codex","cli","summaries","github","generate","summarization","2026"]