Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/pymodel/react-frontend-skills --skill nextjsAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
Next.js Community Next.js 16 App Router Best Practices
Comprehensive 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.
When to Apply
Reference these guidelines when:
- Writing new Next.js 16 App Router code
- Configuring caching strategies with 'use cache' directive
- Implementing server components and data fetching
- Setting up routing with parallel and intercepting routes
- Creating server actions for form handling and mutations
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Build & Bundle Optimization | CRITICAL | build- |
| 2 | Caching Strategy | CRITICAL | cache- |
| 3 | Server Components & Data Fetching | HIGH | server- |
| 4 | Routing & Navigation | HIGH | route- |
| 5 | Server Actions & Mutations | MEDIUM-HIGH | action- |
| 6 | Streaming & Loading States | MEDIUM | stream- |
| 7 | Metadata & SEO | MEDIUM | meta- |
| 8 | Client Components | LOW-MEDIUM | client- |
Quick Reference
1. Build & Bundle Optimization (CRITICAL)
build-optimize-package-imports- Configure optimizePackageImports for Icon Librariesbuild-dynamic-imports- Use Dynamic Imports for Heavy Componentsbuild-barrel-files- Avoid Barrel File Imports in App Routerbuild-turbopack-config- Configure Turbopack at the top levelbuild-external-packages- Configure Server External Packages for Node Dependencies
2. Caching Strategy (CRITICAL)
cache-use-cache-directive- Use 'use cache' with Cache Componentscache-revalidate-tag- Use revalidateTag with cacheLife Profilescache-fetch-options- Configure Fetch Cache Options Explicitlycache-revalidate-path- Use revalidatePath for Route-Level Cache Invalidationcache-react-cache- Use React cache() for Request Deduplicationcache-segment-config- Match route configuration to the active cache model
3. Server Components & Data Fetching (HIGH)
server-parallel-fetching- Fetch Data in Parallel in Server Componentsserver-component-streaming- Stream Server Components for Progressive Loadingserver-data-colocation- Colocate Data Fetching with Componentsserver-preload-pattern- Use Preload Pattern for Critical Dataserver-avoid-client-fetching- Avoid Client-Side Data Fetching for Initial Dataserver-error-handling- Handle Server Component Errors Gracefully
4. Routing & Navigation (HIGH)
route-parallel-routes- Use Parallel Routes for Independent Contentroute-intercepting-routes- Use Intercepting Routes for Modal Patternsroute-prefetching- Configure Link Prefetching Appropriatelyroute-proxy-ts- Use proxy.ts for Network Boundary Logicroute-not-found- Use notFound() for Missing Resources
5. Server Actions & Mutations (MEDIUM-HIGH)
action-server-action-forms- Use Server Actions for Form Submissionsaction-pending-states- Show Pending States with useFormStatusaction-error-handling- Handle Server Action Errors Gracefullyaction-optimistic-updates- Use Optimistic Updates for Instant Feedbackaction-revalidation- Revalidate Cache After Mutations
6. Streaming & Loading States (MEDIUM)
stream-suspense-boundaries- Place Suspense Boundaries Strategicallystream-loading-tsx- Use loading.tsx for Route-Level Loading Statesstream-error-tsx- Use error.tsx for Route-Level Error Boundariesstream-skeleton-matching- Match Skeleton Dimensions to Actual Contentstream-nested-suspense- Nest Suspense for Progressive Disclosure
7. Metadata & SEO (MEDIUM)
meta-generate-metadata- Use generateMetadata for Dynamic Metadatameta-sitemap- Generate Sitemaps Dynamicallymeta-robots- Configure Robots for Crawl Controlmeta-opengraph-images- Generate Dynamic OpenGraph Images
8. Client Components (LOW-MEDIUM)
client-use-client-boundary- Minimize 'use client' Boundary Scopeclient-children-pattern- Pass Server Components as Children to Client Componentsclient-hydration-mismatch- Avoid Hydration Mismatchesclient-third-party-scripts- Load Third-Party Scripts Efficiently
How to Use
Read individual reference files for detailed explanations and code examples:
- build-dynamic-imports - Example rule file
- cache-use-cache-directive - Example rule file
Related Skills
- For React 19 fundamentals, see
reactskill - For data fetching patterns, see
tanstack-queryskill - For client-side forms, see
react-hook-formskill
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
