frontend-dev-guidelines

Structure pages using Server Components by default in Next.js 16 App Router, fetching data server-side with Clerk authentication and wrapping async content in Suspense boundaries. Use React 19.2 features like useEffectEvent for stable callbacks and Activity for non-blocking states to optimize performance and reduce client-side JavaScript.

Implement Clerk authentication patterns for both server and client components. Use currentUser() from Clerk in Server Components to fetch user data, then proxy client-side requests through API routes to maintain secure authentication flows across your Next.js application.

Use Tailwind CSS v4 with utility helpers like cn() and tailwind-variants for standardized styling. These tools ensure consistent UI composition across components while maintaining clean, maintainable class combinations in your Next.js application.

Yes. Next.js 16 Server Components support async data fetching with Clerk and backend APIs. Wrap async content in Suspense with loading.tsx fallbacks to provide non-blocking loading states while data resolves server-side.

Use nuqs for type-safe URL state management in Next.js 16 App Router with React 19.2. It integrates seamlessly with your frontend stack to handle query parameters and route state while maintaining TypeScript type safety.

Use Zod for schema-based form validation in Next.js with full TypeScript support. Define validation schemas that enforce type safety across server and client components, ensuring reliable data validation for authentication flows and user input.