nextjslisted

# Next.js Development Guidelines Development patterns for Next.js 15+ using the App Router, Server Components, and modern data fetching. ## Core Principles 1. **Server-First Architecture**: Default to Server Components, use Client Components only when needed 2. **File-Based Routing**: Use App Router conventions for pages, layouts, and route handlers 3. **Data Fetching**: Fetch data where it's needed using async/await in Server Components 4. **Type Safety**: Leverage TypeScript for route params, search params, and data types 5. **Performance**: Optimize with streaming, parallel data fetching, and static generation ## App Router Structure ### File Conventions ``` app/ ├── layout.tsx # Root layout (required) ├── page.tsx # Home page ├── loading.tsx # Loading UI ├── error.tsx # Error boundary ├── not-found.tsx # 404 page ├── posts/ │ ├── layout.tsx # Posts layout │ ├── page.tsx # /posts │ ├── [id]/ │ │ └── page.tsx # /posts/123 │ └── new/ │ └── page.tsx # /posts/new └── api/ └── posts/ └── route.ts # API route handler ``` ### Page Component ```typescript // app/posts/page.tsx import { getPosts } from '@/lib/api'; export const metadata = { title: 'Posts', description: 'Browse all blog posts' }; export default async function PostsPage() { const posts = await getPosts(); return ( <div> <h1>Posts</h1> <ul> {posts.map(post