nextjs▌

Next.js App Router development patterns covering server/client components, data fetching, and routing. \n \n Server Components are the default; use Client Components only for interactivity (useState, event handlers, forms) \n Data fetching belongs in Server Components with three caching strategies: static (build-time), ISR (time-based revalidation), and dynamic (no-store) \n File conventions organize routes: page.tsx for UI, layout.tsx for shared structure, loading.tsx and error.tsx for states,

Supabase Auth integration for Next.js App Router with middleware-based session management. \n \n Handles server/client authentication boundaries using @supabase/ssr, protecting routes via middleware and managing cookie-based sessions \n Provides patterns for OAuth callbacks, Server Actions for auth operations, and proper token handling across Server and Client Components \n Includes anti-patterns to avoid: getSession in Server Components, unlistened client auth state, and manual token storage \n

Advanced Next.js patterns for authentication, middleware, Server Actions, and user-scoped caching with Clerk. \n \n Distinguishes server-side await auth() from client-side useAuth() hook; mixing them is a common breaking mistake \n Covers middleware strategies (public-first vs protected-first), API route protection, and proper HTTP status codes (401 vs 403) \n Includes user-scoped caching patterns with unstable_cache and protecting Server Actions from unauthorized mutations \n Provides Core 2 co

Use this pattern whenever a page needs to load data based on whatever identifier appears in the URL. Common scenarios include:

The useSearchParams hook requires TWO things:

This pattern handles a common Next.js requirement: client-side interaction (button click) that needs to set server-side cookies.

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.

Provide comprehensive guidance for advanced Next.js App Router features including Route Handlers (API routes), Parallel Routes, Intercepting Routes, Server Actions, error handling, draft mode, and streaming with Suspense.

Opinionated wizard that scans your Next.js project and guides you through complete Sentry setup across all three runtimes: browser, Node.js server, and Edge.

Build production-grade Next.js applications or systematically migrate existing frontends to Next.js + shadcn/ui following strict design principles and best practices.