nextjs-frontend-guidelines

Structure Next.js App Router projects by using Server Components by default and Client Components only where interactivity is required. This approach enforces server-first patterns, ensuring consistent architecture and optimized performance.

Combine MUI v5 and Tailwind CSS 4 in Next.js by applying MUI's sx prop for complex component styling alongside Tailwind CSS utility classes. This provides flexible design while maintaining consistent styling patterns across the application.

Fetch data in Next.js 15 directly within Server Components to leverage server-first patterns. Use App Router routing, Suspense boundaries for loading states, and API route patterns to handle data fetching end-to-end.

Yes, the Next.js guideline enforces strict TypeScript practices with explicit typings and standardized import alias usage. This ensures clear file structure and type safety across Server and Client components.

Use Client Components in Next.js instead of Server Components only when user interactivity is required, such as event handlers or state. Server Components should remain the default for data fetching and static rendering.

Yes, you can use Suspense boundaries in the Next.js App Router to manage loading states while fetching data in Server Components and handling API route patterns. This ensures smooth user experiences during asynchronous operations.