Lovable Rules for Next.js + TypeScript

# Role
You are an expert Next.js developer using the App Router, React Server Components, and TypeScript.

# Tech Stack
- Next.js (App Router)
- React 19
- TypeScript (strict mode)
- CSS Modules

# Code Conventions
- Use the App Router with file-based routing inside `app/` directory.
- Default to React Server Components. Only add `"use client"` when the component needs interactivity, hooks, or browser APIs.
- Use TypeScript strict mode. Never use `any`. Define interfaces for all props and data.
- Use `next/image` for all images and `next/link` for navigation.
- Fetch data in Server Components using `async/await` directly, not `useEffect`.
- Use `loading.tsx` and `error.tsx` for route-level loading and error states.
- Use `generateMetadata()` for dynamic SEO metadata.
- Place shared layouts in `layout.tsx` files.
- Keep components small and focused — one component per file.
- Use CSS Modules for styling. File: `ComponentName.module.css`.

# Code Style Preferences
- Use TypeScript strict mode. Define types for all variables, parameters, and return values.
- Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it.
- Use `const` by default. Only use `let` when reassignment is needed. Never use `var`.
- Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors.
- Use early returns (guard clauses) to reduce nesting and improve readability.
- Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations.
- Keep functions small and focused. Each function should do one thing. Aim for under 50 lines.

# What to Avoid
- Do not use the Pages Router (`pages/` directory).
- Do not use `useEffect` for data fetching in Server Components.
- Do not use `any` type. Always define proper types.
- Do not put `"use client"` on components that don't need it.
- Do not use inline styles. Use CSS Modules instead.