Next.js 15 Best Practices

Team standard for building Next.js 15 applications with App Router, Tailwind CSS, and TypeScript.

Decision Tree: Server vs Client Component

Need interactivity (onClick, onChange, state)?
├── YES → 'use client'
│   └── Keep it small. Push interactivity to leaf components.
└── NO → Server Component (default)
    ├── Need data? → async function + fetch/db directly
    ├── Need to show loading? → Add loading.tsx or <Suspense>
    └── Need client child? → Pass data as props (serializable only)

Key rule: Default to Server Components. Only add 'use client' at the lowest possible node.

Export Rule (MANDATORY)