[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEDXCQVQY5MZJF82WFGFAC":3,"skill-same:01M6FEDXCQVQY5MZJF82WFGFAC":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6FEDXCQVQY5MZJF82WFGFAC","nextjs",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fnextjs\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Next.js Community Next.js 16 App Router Best Practices\n\nComprehensive performance optimization guide for Next.js 16 App Router applications, maintained by the Next.js Community. Contains 40 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Writing new Next.js 16 App Router code\n- Configuring caching strategies with 'use cache' directive\n- Implementing server components and data fetching\n- Setting up routing with parallel and intercepting routes\n- Creating server actions for form handling and mutations\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Build & Bundle Optimization | CRITICAL | `build-` |\n| 2 | Caching Strategy | CRITICAL | `cache-` |\n| 3 | Server Components & Data Fetching | HIGH | `server-` |\n| 4 | Routing & Navigation | HIGH | `route-` |\n| 5 | Server Actions & Mutations | MEDIUM-HIGH | `action-` |\n| 6 | Streaming & Loading States | MEDIUM | `stream-` |\n| 7 | Metadata & SEO | MEDIUM | `meta-` |\n| 8 | Client Components | LOW-MEDIUM | `client-` |\n\n## Quick Reference\n\n### 1. Build & Bundle Optimization (CRITICAL)\n\n- `build-optimize-package-imports` - Configure optimizePackageImports for Icon Libraries\n- `build-dynamic-imports` - Use Dynamic Imports for Heavy Components\n- `build-barrel-files` - Avoid Barrel File Imports in App Router\n- `build-turbopack-config` - Enable Turbopack File System Caching\n- `build-external-packages` - Configure Server External Packages for Node Dependencies\n\n### 2. Caching Strategy (CRITICAL)\n\n- `cache-use-cache-directive` - Use the 'use cache' Directive for Explicit Caching\n- `cache-revalidate-tag` - Use revalidateTag with cacheLife Profiles\n- `cache-fetch-options` - Configure Fetch Cache Options Correctly\n- `cache-revalidate-path` - Use revalidatePath for Route-Level Cache Invalidation\n- `cache-react-cache` - Use React cache() for Request Deduplication\n- `cache-segment-config` - Configure Route Segment Caching with Exports\n\n### 3. Server Components & Data Fetching (HIGH)\n\n- `server-parallel-fetching` - Fetch Data in Parallel in Server Components\n- `server-component-streaming` - Stream Server Components for Progressive Loading\n- `server-data-colocation` - Colocate Data Fetching with Components\n- `server-preload-pattern` - Use Preload Pattern for Critical Data\n- `server-avoid-client-fetching` - Avoid Client-Side Data Fetching for Initial Data\n- `server-error-handling` - Handle Server Component Errors Gracefully\n\n### 4. Routing & Navigation (HIGH)\n\n- `route-parallel-routes` - Use Parallel Routes for Independent Content\n- `route-intercepting-routes` - Use Intercepting Routes for Modal Patterns\n- `route-prefetching` - Configure Link Prefetching Appropriately\n- `route-proxy-ts` - Use proxy.ts for Network Boundary Logic\n- `route-not-found` - Use notFound() for Missing Resources\n\n### 5. Server Actions & Mutations (MEDIUM-HIGH)\n\n- `action-server-action-forms` - Use Server Actions for Form Submissions\n- `action-pending-states` - Show Pending States with useFormStatus\n- `action-error-handling` - Handle Server Action Errors Gracefully\n- `action-optimistic-updates` - Use Optimistic Updates for Instant Feedback\n- `action-revalidation` - Revalidate Cache After Mutations\n\n### 6. Streaming & Loading States (MEDIUM)\n\n- `stream-suspense-boundaries` - Place Suspense Boundaries Strategically\n- `stream-loading-tsx` - Use loading.tsx for Route-Level Loading States\n- `stream-error-tsx` - Use error.tsx for Route-Level Error Boundaries\n- `stream-skeleton-matching` - Match Skeleton Dimensions to Actual Content\n- `stream-nested-suspense` - Nest Suspense for Progressive Disclosure\n\n### 7. Metadata & SEO (MEDIUM)\n\n- `meta-generate-metadata` - Use generateMetadata for Dynamic Metadata\n- `meta-sitemap` - Generate Sitemaps Dynamically\n- `meta-robots` - Configure Robots for Crawl Control\n- `meta-opengraph-images` - Generate Dynamic OpenGraph Images\n\n### 8. Client Components (LOW-MEDIUM)\n\n- `client-use-client-boundary` - Minimize 'use client' Boundary Scope\n- `client-children-pattern` - Pass Server Components as Children to Client Components\n- `client-hydration-mismatch` - Avoid Hydration Mismatches\n- `client-third-party-scripts` - Load Third-Party Scripts Efficiently\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n- [build-dynamic-imports](references\u002Fbuild-dynamic-imports.md) - Example rule file\n- [cache-use-cache-directive](references\u002Fcache-use-cache-directive.md) - Example rule file\n\n## Related Skills\n\n- For React 19 fundamentals, see `react-19` skill\n- For data fetching patterns, see `tanstack-query` skill\n- For client-side forms, see `react-hook-form` skill\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Fnextjs",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill nextjs",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill nextjs",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill nextjs","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fnextjs\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]