biohazard-vfx-website/.cursor/rules/routing-layout.mdc
2025-10-23 05:11:03 -06:00

67 lines
1.7 KiB
Plaintext

---
globs: src/app/**/*.tsx
---
# Routing and Layout Rules
## App Router Structure
- **Pages**: Live in `src/app/` directory
- **Server Components**: Default to server components, promote to client only when needed
- **Layout Hierarchy**: Root layout owns global providers, navigation, and footer
- **Route Groups**: Use `(marketing)` for grouped routes without affecting URL structure
## Layout Rules
### Root Layout ([src/app/layout.tsx](mdc:src/app/layout.tsx))
- Owns global providers and theme class
- Contains `<Navigation />` and `<Footer />` components
- Sets up font variables and metadata
- **DO NOT** duplicate these in child layouts
### Page Layouts
- Keep server components as default
- Add `"use client"` only when necessary for interactivity
- Define unique metadata for each route
## Metadata Requirements
Every page must have:
```typescript
export const metadata: Metadata = {
title: "Unique Page Title",
description: "Unique description for SEO",
// Include Open Graph and Twitter cards
}
```
## Route Protection
The [src/middleware.ts](mdc:src/middleware.ts) currently redirects all routes to `/` except:
- Home page (`/`)
- Next.js internal routes (`/_next/*`)
- Favicon files
- Specific static assets (OLIVER.jpeg, OLIVER_depth.jpeg, etc.)
## Static Assets
When adding new files to `public/`, update the middleware allowlist in [src/middleware.ts](mdc:src/middleware.ts) line 8 to prevent 307 redirects.
## Common Patterns
```typescript
// Page component
export default function PageName() {
return (
<div className="container mx-auto px-4">
{/* Page content */}
</div>
)
}
// With metadata
export const metadata: Metadata = {
title: "Page Title",
description: "Page description"
}
```