Next.js Image Story Component

Build component stories that demonstrate optimized image handling using modern image features.

Requirements

Create stories for a ProductCard component that displays a product with an image, name, and price.

Your stories should demonstrate:

1. Basic Image Display: A default story with standard image rendering
2. Placeholder Handling: A story showing blur placeholder behavior during image load
3. Priority Loading: Stories demonstrating both high-priority (above-the-fold) and standard priority image loading

Test Cases

• The default story exports a valid story configuration with a ProductCard component @test
• A story demonstrates blur placeholder configuration for image loading @test
• Stories include both priority and non-priority image loading examples @test

Implementation

@generates

API

// Default export with story metadata
export default {
  title: string,
  component: Component
};

// Story exports demonstrating different image configurations
export const Default = {};
export const WithBlurPlaceholder = {};
export const WithPriority = {};

Dependencies { .dependencies }

Storybook { .dependency }

Provides the story framework for building and documenting UI components in isolation.

@satisfied-by

Next.js { .dependency }

Provides optimized image handling and React framework features.

@satisfied-by