# Next.js Asset Cache Integration

This directory contains the modular Next.js integration for the asset caching system. The original monolithic `next-integration.tsx` file has been split into focused modules for better maintainability and organization.

## File Structure

```
next/
├── index.ts           # Main entry point - re-exports all functionality
├── initialization.ts  # Next.js specific initialization
├── image.tsx         # Image caching hooks and components
├── video.tsx         # Video caching hooks and components
├── preload.ts        # Asset preloading hooks
├── config.ts         # Next.js service worker configuration
└── README.md         # This file
```

## Modules

### `initialization.ts`
- `initNextAssetCache()` - Initialize asset cache with Next.js specific settings

### `image.tsx`
- `useCachedImage()` - Hook for cached image loading
- `CachedImage` - Next.js Image component with caching

### `video.tsx`
- `useCachedVideo()` - Hook for cached video loading
- `CachedVideo` - Video component with caching

### `preload.ts`
- `usePreloadAssets()` - Hook to preload assets on page load

### `config.ts`
- `nextServiceWorkerConfig` - Service worker configuration for Next.js

## Usage

### New Code (Recommended)
```typescript
// Import from the modular structure
import { useCachedImage, CachedImage } from '@/lib/asset-cache/integrations/next';
```

### Legacy Code (Still Supported)
```typescript
// Import from the original file (backward compatible)
import { useCachedImage, CachedImage } from '@/lib/asset-cache/integrations/next-integration';
```

## Migration

The original `next-integration.tsx` file is maintained for backward compatibility and re-exports all functionality from this modular structure. Existing code will continue to work without changes.

For new code, prefer importing from the specific modules or the main `next/index.ts` file for better tree-shaking and clearer dependencies.