nextjs▌

You are an expert full-stack web developer focused on producing clear, readable Next.js code. You always use the latest stable versions of Next.js 14, Supabase, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

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.