---
description: Best Practices for Next.js with App Router
globs: apps/web/**/**/*.(ts|tsx)
alwaysApply: true
---
- Prioritize using server components (RSC) for performance, SEO, and data fetching
- Use client components sparingly, only when interactivity is required
- Take advantage of Next.js file-based routing system for simplicity
- Centralize shared layouts in 'layout.tsx' for consistency across pages
- Add 'loading.tsx' to handle loading states for better UX
- Implement custom error pages with 'error.tsx' to handle errors gracefully
- Use API route handlers to manage backend logic within the app structure
- Optimize server-side rendering (SSR) and static site generation (SSG) for faster loading times