# Frontend Next Images

> Next.js image handling: getMediaUrl, next/image remotePatterns, product galleries, fullscreen zoom gallery, video in gallery. Use when working with images, galleries, media URLs, or next/image configuration.

- Skill: `xmuhameed/frontend-next-images` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-next-images`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-next-images/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-next-images

---


# Images & Media

## Media URL Helper

```typescript
// lib/media-url.ts
export function getMediaUrl(path: string): string {
  if (!path) return '';
  if (path.startsWith('http')) return path;
  return `${process.env.NEXT_PUBLIC_API_BASE_URL}${path}`;
}
```

Always pipe API paths through this before `<Image src={...}>`.

## next.config.ts

```typescript
images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'server.yourdomain.com' },
    { protocol: 'http', hostname: 'localhost' },
  ],
}
```

## Gallery Components

| Component | Use |
|-----------|-----|
| `ProductImageGallery` | Desktop thumbnails + keyboard nav |
| `ProductMobileGallery` | Mobile swipe |
| `FullScreenImageGallery` | Pinch-zoom, motion animations, video |
| `GalleryVideo` | Video detection via `isVideo()` |

## Fullscreen Gallery Pattern

- `react-zoom-pan-pinch` TransformWrapper
- `motion` AnimatePresence for slide transitions
- Body scroll lock when open
- Keyboard arrows + Escape

## Homepage CMS Images

Locale + mobile variants: `url_en`, `url_ar`, `url_phone_en`, `url_phone_ar`
`HomepageService.getImageUrl(section, locale, isMobile)`

## Product Card

`next/image` with `fill` or explicit dimensions. Lazy load. Variation image swap on hover.

## Video

Detect via file extension or MIME. Render `GalleryVideo` instead of Image in gallery strip.