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 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. Two rules cover Next.js 16.3 preview features (Instant Navigations, Partial Prefetching), gated behind cacheComponents and partialPrefetching.

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

Quick Reference

1. Build & Bundle Optimization (CRITICAL)

• build-optimize-package-imports - Configure optimizePackageImports for Icon Libraries
• build-dynamic-imports - Use Dynamic Imports for Heavy Components
• build-barrel-files - Avoid Barrel File Imports in App Router
• build-turbopack-config - Configure Turbopack at the top level
• build-external-packages - Configure Server External Packages for Node Dependencies

2. Caching Strategy (CRITICAL)

• cache-use-cache-directive - Use 'use cache' with Cache Components
• cache-revalidate-tag - Use revalidateTag with cacheLife Profiles
• cache-fetch-options - Configure Fetch Cache Options Explicitly
• cache-revalidate-path - Use revalidatePath for Route-Level Cache Invalidation
• cache-react-cache - Use React cache() for Request Deduplication
• cache-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 Components
• server-component-streaming - Stream Server Components for Progressive Loading
• server-data-colocation - Colocate Data Fetching with Components
• server-preload-pattern - Use Preload Pattern for Critical Data
• server-avoid-client-fetching - Avoid Client-Side Data Fetching for Initial Data
• server-error-handling - Handle Server Component Errors Gracefully

4. Routing & Navigation (HIGH)

• route-parallel-routes - Use Parallel Routes for Independent Content
• route-intercepting-routes - Use Intercepting Routes for Modal Patterns
• route-prefetching - Configure Link Prefetching Appropriately
• route-instant-navigations - Make Navigations Instant with Stream, Cache, or Block (16.3 preview)
• route-partial-prefetching - Use Partial Prefetching for Reusable Route Shells (16.3 preview)
• route-proxy-ts - Use proxy.ts for Network Boundary Logic
• route-not-found - Use notFound() for Missing Resources

5. Server Actions & Mutations (MEDIUM-HIGH)

• action-server-action-forms - Use Server Actions for Form Submissions
• action-pending-states - Show Pending States with useFormStatus
• action-error-handling - Handle Server Action Errors Gracefully
• action-optimistic-updates - Use Optimistic Updates for Instant Feedback
• action-revalidation - Revalidate Cache After Mutations

6. Streaming & Loading States (MEDIUM)

• stream-suspense-boundaries - Place Suspense Boundaries Strategically
• stream-loading-tsx - Use loading.tsx for Route-Level Loading States
• stream-error-tsx - Use error.tsx for Route-Level Error Boundaries
• stream-skeleton-matching - Match Skeleton Dimensions to Actual Content
• stream-nested-suspense - Nest Suspense for Progressive Disclosure

7. Metadata & SEO (MEDIUM)

• meta-generate-metadata - Use generateMetadata for Dynamic Metadata
• meta-sitemap - Generate Sitemaps Dynamically
• meta-robots - Configure Robots for Crawl Control
• meta-opengraph-images - Generate Dynamic OpenGraph Images

8. Client Components (LOW-MEDIUM)

• client-use-client-boundary - Minimize 'use client' Boundary Scope
• client-children-pattern - Pass Server Components as Children to Client Components
• client-hydration-mismatch - Avoid Hydration Mismatches
• client-third-party-scripts - Load Third-Party Scripts Efficiently

How to Use

Run in the project root first:

npx -y @pymodel/react-frontend-skills detect               # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill nextjs  # deprecated APIs → rule IDs

Read references/<rule-id>.md for each rule above that matches the task and for each scan hit: why it matters, then incorrect vs. correct code.

Related Skills

• For React 19 fundamentals, see react skill
• For data fetching patterns, see tanstack-query skill
• For client-side forms, see react-hook-form skill