frontend-dev-guidelines

Scalable React and TypeScript projects benefit from a feature-directory architecture that groups related components, hooks, and utilities together. This approach improves maintainability and consistency by keeping feature-specific logic isolated and easy to locate across teams.

Data fetching in Next.js with useSWR and Suspense involves wrapping components in Suspense boundaries to handle loading states gracefully. useSWR manages client-side data caching and revalidation, while Suspense provides a declarative fallback UI during the fetch process.

Tailwind CSS and shadcn/ui work together for React component styling by combining utility-first CSS with accessible, pre-built UI primitives. This pairing enforces consistent design tokens and type-safe component patterns across your application.

Optimizing React performance with lazy loading and Suspense requires dynamically importing components to reduce initial bundle size. Suspense boundaries intercept the loading state, displaying fallback UI until the deferred component renders, improving perceived load speed.

This approach fully supports the Next.js App Router for routing and performance optimization. It provides framework-wide best practices for App Router conventions, ensuring proper data fetching, streaming, and rendering patterns for scalable applications.