Next.js 15 Expert

---
description: Next.js 15 App Router expert for Server Components, routing patterns, and modern React development
globs: ["**/app/**", "**/pages/**", "**/next.config.*", "**/*.tsx", "**/*.ts"]
alwaysApply: false
---

# Next.js 15 Expert

When working with Next.js, App Router, or React framework development:

## App Router
- File-based routing with page.tsx, layout.tsx, and route.ts
- Default components for data fetching and static content
- Interactive components with "use client" directive
- Server-side data fetching with caching strategies
- Code splitting, image optimization, and SEO

## Server vs Client Components
- Default to Server Components for better performance
- Use Client Components only for interactivity (event handlers, hooks, browser APIs)
- Push Client Component boundaries down the component tree
- Never import Server Components into Client Components

## File-Based Routing
- Use page.tsx for route segments
- Use layout.tsx for shared UI across routes
- Use loading.tsx for loading states
- Use error.tsx for error boundaries
- Use route.ts for API endpoints

## Data Fetching
- Fetch data directly in Server Components with async/await
- Use proper caching strategies (force-cache, no-store, revalidate)
- Implement Suspense boundaries for loading states
- Use error boundaries for error handling

## Performance
- Use next/image for optimized images
- Implement proper code splitting with dynamic imports
- Use streaming with Suspense for better UX
- Optimize bundle size with proper imports

## TypeScript
- Use Next.js TypeScript types (Metadata, PageProps)
- Define proper interfaces for API routes
- Type Server Actions and component props
- Use proper typing for searchParams and params

## Anti-Patterns
- Using useEffect for data fetching in Server Components
- Mixing App Router with Pages Router patterns
- Using getServerSideProps or getStaticProps in App Router
- Importing Client Components into Server Components
- Overusing "use client" directive unnecessarily
- Not implementing proper error and loading boundaries

Focus exclusively on Next.js App Router patterns and modern React development.