[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6N8AYQMEHM6KFW1Z1SJS4GV":3,"skill-same:01M6N8AYQMEHM6KFW1Z1SJS4GV":68},{"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":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":13,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":53,"install":54,"resources":67},"01M6N8AYQMEHM6KFW1Z1SJS4GV","nextjs-best-practices",null,"Next.js App Router principles. Server Components, data fetching, routing patterns.","JackSmack1971\u002Fantigravity-meta","JackSmack1971","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F128181597?v=4","01M6KS1FH32N6WNWZ68JC9FFDJ","01M6N7JCBG1NDFN2ZNKGMKMFMQ",0,"MIT","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\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],"best practices","nextjs","nextjs best practices","router","app router","data fetching","unknown","Server Components","principles","app","next","patterns","community","components","js","Next.js","data","server","routing","2026-11-10 10:12:30",false,"---\nname: nextjs-best-practices\ndescription: \"Next.js App Router principles. Server Components, data fetching, routing patterns.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\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":29,"source":35,"date_added":47,"description":7},"2026-02-27","main","d47cc0de4d70e7006abaebc8a07a7c7d626c6ccb",".agents\u002Fskills\u002Fnextjs-best-practices","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta","https:\u002F\u002Fgithub.com\u002FJackSmack1971","2026-04-19 04:53:59",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add JackSmack1971\u002Fantigravity-meta --skill nextjs-best-practices",{"tool":60,"command":61},"bunx","bunx skills add JackSmack1971\u002Fantigravity-meta --skill nextjs-best-practices",{"tool":63,"command":64},"pnpm","pnpm dlx skills add JackSmack1971\u002Fantigravity-meta --skill nextjs-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-best-practices\u002FSKILL.md",true,[],[69,90,113,138,157,173],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":42},"01M6N8FMBDREJBRGQ37HAFBWWS","wcag-audit-patterns","Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwcag-audit-patterns\u002FSKILL.md",[],[76,77,34,78,79,80,81,82,83,84,85,86,87,88,89,35],"wcag audit","audit","wcag audit patterns","WCAG","with","web content","strategies","actionable","content","guidelines","web","remediation","guide","safe",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":99,"publishedAt":42},"01M6N8FEJG7PTGF6G16JW4HJV1","unit-testing-test-generate","Generate comprehensive, maintainable unit tests across languages with strong coverage and edge case focus.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Funit-testing-test-generate\u002FSKILL.md",[96],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",[100,101,102,103,104,105,106,107,29,80,108,109,110,111,35,112],"testing","test","generate","unit testing","unit testing test generate","unit","unit tests","case","edge","tests","across","focus","coverage",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":123,"publishedAt":42},"01M6N8FAAMS0QNTPD51FMYHAXE","testing-qa","Comprehensive testing and QA workflow covering unit testing, integration testing, E2E testing, browser automation, and quality assurance.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftesting-qa\u002FSKILL.md",[119,120],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":121,"categoryName":122,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[124,100,125,126,103,127,128,129,105,130,131,132,133,134,135,89,136,137],"qa","testing qa","quality assurance","quality","bundle","integration testing","e2e","integration","browser","personal","automation","workflow","browser automation","e2e testing",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":145,"publishedAt":42},"01M6N8EXMACVX27C0TXFT0E48Q","test-fixing","Systematically identify and fix all failing tests using smart grouping strategies. Use when explicitly asks to fix tests (\"fix these tests\", \"make tests pass\"), reports test failures (\"tests are failing\", \"test suite is broken\"), or completes implementation and wants tests passing.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftest-fixing\u002FSKILL.md",[144],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},[146,101,35,147,148,109,82,149,150,151,152,153,154,155,156,89],"test fixing","suite","make","grouping","make tests","implementation","reports","test suite","use","fix","broken",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":164,"publishedAt":42},"01M6N8ERMMBFTRRNK0T7H2S6R2","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[163],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},[165,166,167,101,168,169,35,151,154,170,171,172,29],"driven","development","test driven development","bugfix","feature","code","writing","implementing",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":183,"publishedAt":42},"01M6N8EKRM0XQX5BKR8NJ2YAGF","terraform-infrastructure","Terraform infrastructure as code workflow for provisioning cloud resources, creating reusable modules, and managing infrastructure at scale.","https:\u002F\u002Fgithub.com\u002FJackSmack1971\u002Fantigravity-meta\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fterraform-infrastructure\u002FSKILL.md",[179,182],{"categoryNo":180,"categoryName":181,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":121,"categoryName":122,"taxonomyType":20,"taxonomyTypeDesc":21},[184,185,186,187,188,189,190,128,191,192,193,194,195,196,170,135,89,133],"terraform","infrastructure","terraform infrastructure","resources","for","at","scale","as","reusable","modules","provisioning","cloud","infrastructure as code"]