Next.js 14 Standards

---
description: Next.js 14 application standards and best practices for routing, data fetching, and rendering patterns
globs: app/**/*, pages/**/*, components/**/*
---

# Next.js 14 Standards

## Core Features

### App Router

```yaml
routing_patterns:
  - Use app directory for new routes
  - Implement parallel routes where needed
  - Leverage intercepting routes
  - Use loading.tsx for suspense
  - Implement error.tsx boundaries

conventions:
  layout:
    - Root layout with required html/body tags
    - Shared UI in layout components
    - Template components for variations

  components:
    - Server components by default
    - 'use client' for client components
    - Interleaved client/server architecture
```

### Data Fetching

```yaml
patterns:
  server_components:
    - Async components
    - Direct database queries
    - API integrations
    - Server-side fetch

  caching:
    - Route cache
    - Router cache
    - Full route cache
    - Data cache

  mutations:
    - Server actions
    - Form actions
    - Optimistic updates
    - Revalidation
```

### Rendering Patterns

```yaml
strategies:
  static:
    - Default rendering mode
    - Build-time generation
    - Revalidation options

  dynamic:
    - Dynamic functions
    - Cookies/headers
    - Search params
    - Dynamic segments

  streaming:
    - Loading states
    - Suspense boundaries
    - Streaming SSR
```

## Best Practices

### Performance

```yaml
optimizations:
  images:
    - Use next/image
    - Proper sizing
    - Loading strategies
    - Format optimization

  javascript:
    - Route grouping
    - Component chunking
    - Dynamic imports
    - Bundle analysis

  styles:
    - CSS modules
    - Tailwind integration
    - CSS-in-JS solutions
    - Critical CSS
```

### Security

```yaml
guidelines:
  headers:
    - CSP configuration
    - CORS policies
    - Security headers

  auth:
    - Auth.js integration
    - Middleware usage
    - Route protection

  data:
    - Input validation
    - SQL injection prevention
    - XSS protection
```

### Development

```yaml
practices:
  structure:
    - Feature-based organization
    - Shared components
    - Utils separation
    - Type definitions

  testing:
    - Jest configuration
    - React Testing Library
    - E2E with Playwright
    - API testing

  tooling:
    - ESLint setup
    - Prettier config
    - TypeScript strict mode
    - Husky hooks
```