DEV Community

Cover image for How to Use the Next.js Image Component in Storybook

How to Use the Next.js Image Component in Storybook

Jonas Schumacher on July 21, 2021

In this post, we will be setting up Next.js and Storybook in a way that makes it possible to use Next.js' Image component in components rendered in...
Collapse
 
damsalem profile image
Dani Amsalem

Very, very helpful! I'm also using Sanity.io as a CMS and had to use a fallback prop since I'm not passing in JSON data for each image. If anyone else wants to know what I did, I just used the OR operator like so:

<Image
  src={storyHero || urlFor(heroImage.url).auto("format").size(600, 338).url()}
  alt={storyAlt || heroImage?.alt}
  width={600}
  height={338}
  layout={"responsive"}
/>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chema profile image
José María CL

Hey! Thank you so much! You've saved me a lot of time

Collapse
 
jonasmerlin profile image
Jonas Schumacher

Glad it helped!

Collapse
 
irveloper profile image
Irving Caamal

Works like a charm, thanks.

Collapse
 
ryankilleen profile image
Ryan Killeen

This was a life-saver, thanks!

Collapse
 
bilalmohib profile image
Muhammad Bilal Mohib-ul-Nabi

Thank you very much for sharing.It was really helpful.

Collapse
 
xiaoyun profile image
Xiao Yun

Very helpful post. I struggled to find solution for 3 hours but no other blog could help me. I solved after reading this post.
Many thanks Jonas!!! :)

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

It's not working for me

Collapse
 
jonasmerlin profile image
Jonas Schumacher

Something might have changed since I wrote the post. Can you tell me more specifics? What is not working exactly? Do you get any error messages? Then I will try to update the post.

Collapse
 
burdiuz profile image
Oleg Galaburda

Didn't work for me either. What worked for me is providing defaultProps with unoptimized = true in "preview.js"

import Image from 'next/image';

Image.propTypes = {
  unoptimized: null,
};

Image.defaultProps = {
  unoptimized: true,
};
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
pmfeo profile image
Pablo

Thank you both, guys! Oleg's tweak was needed as well in to make it work properly ("next": "12.1.6" + "@storybook/react": "^6.5.9")

Thread Thread
 
jonasmerlin profile image
Jonas Schumacher • Edited

Hey! Sorry, I'm currently working with neither next nor storybook anymore and frankly, don't have the time right now to go into this and comprehend what is going on. Still, this post seems to be pretty popular and I'd like it to be at least correct and runnable when people find it. Would you be willing to suggest the necessary changes to my post to make it map to what you had to do? I would then change the necessary parts and mark you as contributors. Would be really cool!

Collapse
 
rpadovanni profile image
Rafael Padovani

Thank you for sharing, Jonas. I ran into this problem and your article helped me a lot!

Collapse
 
jonasmerlin profile image
Jonas Schumacher

Hey Rafael, really glad to hear that! If you run into any other problems related to this, please tell me about them and your solution and I will add them to the post (with attribution to you of course).

Collapse
 
kouliavtsev profile image
kouliavtsev

The -s public/ seems to be deprecated.

Use staticDirs: ['../public'] in main.js instead.

Collapse
 
thamaragerigr profile image
Thamara Gerig • Edited

Very helpful! Thank you!

Collapse
 
emrahburak profile image
Emrah Burak Gürbüz

Thank you, working...

Collapse
 
mrscx profile image
MrScX

Great article! Storybook has a add-on now which does this automatically with a few other things.

Link: storybook.js.org/addons/storybook-...

Collapse
 
samuelguedesalves profile image
Samuel Guedes

Thank you so much!!!

Collapse
 
cesaraz455 profile image
César Suárez

Muchisimas gracias. Enserio me sacó de un apuro!