# App Directory Next.js App Router configuration and pages for the site frontend. ## Structure - **layout.tsx** — Root layout wrapper. Applies fonts (Inter via next/font), ThemeProvider (dark mode toggle with next-themes), SanityLive (real-time preview), and VisualEditing (Sanity presentation tools). - **page.tsx** — Home page. Fetches the page document with slug "home" from Sanity using `sanityFetch()`. Renders sections via `SectionRenderer`. - **globals.css** — Tailwind v4 base styles and shadcn theme CSS variables (colors, radius, etc.). - **[slug]/page.tsx** — Dynamic page routes. Implements `generateStaticParams()` to fetch all page slugs at build time and enable ISR. Uses `generateMetadata()` to render SEO metadata from page and siteSettings (title, description, og:image, noIndex). - **api/draft-mode/enable/route.ts** — Route to enable Sanity draft mode for visual editing. Validates draft token and sets response cookie. - **api/draft-mode/disable/route.ts** — Route to disable draft mode and clear cookie. - **studio/[[...tool]]/page.tsx** — Embeds Sanity Studio (content management UI) in a catch-all route for Studio paths. ## Key Patterns for AI Agents **Data fetching:** - All pages use `sanityFetch()` from `@/sanity/lib/live` — this enables live updates and draft mode. Never use the raw client. - Home page always uses slug "home". - Dynamic pages fetch by slug param: `sanityFetch(PAGE_QUERY, { slug })`. **SEO metadata:** - `generateMetadata()` accepts the `params` object and page slug. - Fallback to siteSettings values (siteName, siteDescription, ogImage) when page values are undefined. - Set `robots: { noIndex: seo.noIndex }` when present. **Styling:** - Use Tailwind v4 utility classes. - Import theme variables from CSS for consistency. **Dark mode:** - Controlled by next-themes ThemeProvider in layout. - Users toggle via component with key 'd'.