frontend-dev-guidelines

Next.js 15 App Router uses Server Components by default for data fetching and Server Actions for mutations, with Client Components marked by 'use client' for interactivity. This pattern reduces JavaScript sent to browsers, improves performance, and keeps sensitive logic server-side while maintaining type safety with TypeScript.

Combine React Hook Form for state management, Zod for runtime schema validation, shadcn/ui for accessible components, and Tailwind CSS for styling. This stack provides type-safe form handling, client and server validation, and consistent UI without writing form boilerplate.

Use async Server Components to call Supabase directly without exposing API keys to the client. Combine with Suspense boundaries to stream content progressively and prevent layout shift while data loads, improving perceived performance and user experience.

Yes. shadcn/ui components are built on Headless UI and styled with Tailwind CSS, making them fully compatible with Next.js. You customize them via Tailwind configuration and extend component styling without breaking dependencies or creating conflicts.

Server Actions are async functions defined in Server Components or separate files, invoked directly from forms and client components with automatic serialization. API routes are explicit HTTP endpoints. Server Actions reduce boilerplate, provide better type safety, and integrate seamlessly with forms.

Use Suspense boundaries to stream Server Components, lazy-load non-critical components, set explicit width and height on images, and configure Tailwind with fixed dimensions. This ensures components load progressively, Critical Web Vitals improve, and the UI remains stable during data fetching.