Next.js Project

---
applyTo: "**/app/**/*.tsx, **/app/**/*.ts, **/pages/**/*.tsx"
---

# Next.js Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest Next.js documentation: https://nextjs.org/docs
- Use App Router (app directory) as the default for new projects (Next.js 13+)
- Implement Server Components by default, use Client Components only when needed
- Use TypeScript for all Next.js projects
- Leverage Next.js built-in optimizations: Image, Link, Font components
- Implement proper data fetching with Server Components, Server Actions, or Route Handlers

**Core Principles:**

- Understand the difference between Server and Client Components
- Use "use client" directive only when necessary (interactivity, browser APIs)
- Implement file-based routing with the app directory structure
- Use layout.tsx for shared UI and nested layouts
- Implement loading.tsx and error.tsx for better UX
- Use metadata API for SEO optimization

**Data Fetching:**

- Use async Server Components for data fetching
- Implement Server Actions for mutations
- Use Route Handlers for API endpoints
- Leverage automatic request deduplication and caching
- Use revalidate for ISR (Incremental Static Regeneration)

**Performance:**

- Use next/image for automatic image optimization
- Implement code splitting with dynamic imports
- Use next/font for optimized font loading
- Leverage parallel and sequential data fetching

**Summary:**

> For all Next.js work, always use the fetch tool to look up the latest documentation from https://nextjs.org/docs. Build fast, SEO-friendly applications with App Router and Server Components.