75 lines
1.7 KiB
Plaintext
75 lines
1.7 KiB
Plaintext
---
|
|
globs: **/*.tsx,**/*.ts
|
|
---
|
|
|
|
# Images and Assets
|
|
|
|
## Image Handling
|
|
|
|
### Next.js Image Component
|
|
Always use Next.js Image component for remote images:
|
|
|
|
```typescript
|
|
import Image from 'next/image'
|
|
|
|
<Image
|
|
src="https://images.unsplash.com/photo-123"
|
|
alt="Descriptive alt text"
|
|
width={800}
|
|
height={600}
|
|
className="rounded-lg"
|
|
/>
|
|
```
|
|
|
|
### Remote Image Domains
|
|
Current allowed domains in [next.config.ts](mdc:next.config.ts):
|
|
- `images.unsplash.com`
|
|
|
|
**When adding new external domains:**
|
|
1. Add to `remotePatterns` in [next.config.ts](mdc:next.config.ts)
|
|
2. Document the change in [AGENTS.md](mdc:AGENTS.md)
|
|
|
|
## Static Assets
|
|
|
|
### Public Directory
|
|
- Keep `public/` for truly static assets only
|
|
- Current assets: favicon files, images (OLIVER.jpeg, etc.), GIFs
|
|
|
|
### Middleware Whitelist
|
|
**CRITICAL**: When adding new static assets to `public/`, update the middleware allowlist in [src/middleware.ts](mdc:src/middleware.ts) line 8:
|
|
|
|
```typescript
|
|
// Add new asset paths here
|
|
if (pathname === '/' ||
|
|
pathname.startsWith('/_next') ||
|
|
pathname.startsWith('/favicon.') ||
|
|
pathname === '/OLIVER.jpeg' ||
|
|
pathname === '/new-asset.jpg' || // Add new assets here
|
|
pathname === '/reel.mp4') {
|
|
return NextResponse.next();
|
|
}
|
|
```
|
|
|
|
**Common symptom**: If assets return "text/html" Content-Type error, the path isn't whitelisted.
|
|
|
|
## Asset Optimization
|
|
|
|
- Use appropriate image formats (WebP when possible)
|
|
- Provide proper alt text for accessibility
|
|
- Use responsive images with `sizes` prop
|
|
- Optimize file sizes for web delivery
|
|
|
|
## Video Files
|
|
|
|
Custom headers are configured in [next.config.ts](mdc:next.config.ts) for `.mp4` files:
|
|
```typescript
|
|
{
|
|
source: "/:path*.mp4",
|
|
headers: [
|
|
{
|
|
key: "Content-Type",
|
|
value: "video/mp4",
|
|
},
|
|
],
|
|
}
|
|
``` |