Next Images in Storybook

Dejan

May 8

The Image component is very much a key selling point for the framework. This is a must use and situation inevitably arises to use it in a custom component that we'd like to test out in Storybook.

This issue has come back to haunt again with the release of Next.

When I ran to this problem initially, I found the original solution worked a treat. However, after a Nextjs 12.1.5 release, the issue came back and the original workaround lost the battle.

To simply remove this error in storybook, we just need to apply the `unoptimized` prop to the `next/image` component and voila! Storybook is back and working again.

 <Image src="https://images.unsplash.com/photo-1534353436294-0dbd4bdac845?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" height={50} width={50} unoptimized />

But this isn't how we want roll in production so we need to find a way to apply this prop to be false only in production code. A strategy I found useful here to use is the React Context. So we begin by creating the Provider and Context which has the unoptimized prop and set to false by default.

 import React from 'react';  interface ImageOptions {   unoptimized: boolean; }  interface ProviderProps extends ImageOptions {   children: React.ReactNode; }  export const ImageOptimisationContext = React.createContext<ImageOptions>({ unoptimized: false });  // This provider is useful for allowing storybook to use a unoptimized: true export const ImageOptimisationProvider = ({ children, unoptimized }: ProviderProps) => {   return <ImageOptimisationContext.Provider value={{ unoptimized }}>{children}</ImageOptimisationContext.Provider>; };

The new custom wrapper Image component gets access to the React context and applies this property along with the rest of the next/image component. And is very similar to the solution applied previously.

 import React from 'react'; import NextImage, { ImageProps } from 'next/image';  import { ImageOptimisationContext } from '@providers';  const Image = (props: ImageProps) => {   const { unoptimized } = React.useContext(ImageOptimisationContext);   return <NextImage {...props} unoptimized={unoptimized} />; };  export default Image;

Wherever we use the next/image component, we replace it with our custom Image. Whip that find and replace if you like to live on the edge.

 // From import Image from 'next/image`;  // To import Image from './components'

The final touch

A global storybook decorator would flip the prop to true and we should once again be rid of this issue, or at least for now.

./storybook/preview.js

 import React from 'react';  import { ImageOptimisationProvider } from '../src/providers';  export const decorators = [   (Story) => (     <ImageOptimisationProvider unoptimized={true}>       <Story />     </ImageOptimisationProvider>   ), ];

Happy story booking...

Comment