nextjs-architecturelisted

# Next.js Architecture This skill provides Next.js architecture expertise including App Router, Server Components, performance optimization, and migration strategies. ## When to Use This Skill - When designing Next.js application architecture - When migrating from Pages Router to App Router - When implementing Server Components - When optimizing Next.js performance - When making Next.js architecture decisions - When building full-stack Next.js applications ## What This Skill Does 1. **Architecture Design**: Designs Next.js application structure 2. **App Router**: Implements App Router patterns and routing 3. **Server Components**: Uses Server Components effectively 4. **Performance**: Optimizes Next.js for production 5. **Migration**: Migrates from Pages Router to App Router 6. **Best Practices**: Applies Next.js best practices ## How to Use ### Design Architecture ``` Design the architecture for this Next.js application ``` ``` Migrate this Pages Router app to App Router ``` ### Specific Patterns ``` Implement Server Components for this feature ``` ## Architecture Patterns ### App Router Structure ``` app/ ├── (auth)/ │ ├── login/page.tsx │ └── register/page.tsx ├── dashboard/ │ ├── layout.tsx │ ├── page.tsx │ └── analytics/page.tsx ├── api/ │ └── users/route.ts └── layout.tsx ``` ### Server Components **Pattern:** - Server Components by default - Client Components with 'use client' - Direct database access in Server Components - Streaming with S