nextjs

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

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 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