[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-1b023032-ae0d-427c-8820-a9568cc62ce3":3,"$feATNV8gpWPT96dpNdXwN-Kblr5Dc4LpYKTGteeG63C8":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"1b023032-ae0d-427c-8820-a9568cc62ce3","nextjs-best-practices","Next.js应用路由原则。服务器组件、数据获取、路由模式。","cat_coding_frontend","mod_coding","sickn33,coding","---\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\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,81,1299,"2026-05-16 13:30:54",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"cbd525a7-513d-474b-8f56-04abe9e23863","1.0.0","nextjs-best-practices.zip",1969,"uploads\u002Fskills\u002F1b023032-ae0d-427c-8820-a9568cc62ce3\u002Fnextjs-best-practices.zip","98fa86cee0302bb1278d255580f8194ef5c0daaa6615e9a94a83211df76b5599","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":4176}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]