Last week I have written an article explaining how to configure storybookJS in your Next Js project with Tailwind CSS. If you haven't read it already, give it a read before jumping into this configuration setup of Next Image.

How to add storybook in next js with tailwind css?
How to add storybook with Nextjs and tailwind CSS? Complete guide.PostCSS plugin tailwindcss requires PostCSS 8 solved.
XenoXRehan Alam

Now, let us dive in and add Next JS Image tag support in our Storybook JS project. If you are more interested in knowing about the NEXT JS Image tag, read about it on official docs.

next/image | Next.js
Enable Image Optimization with the built-in Image component.
Next.js

To add Next JS image tag support, we need two more addition in our setup and its ready to use Image tag. These changes are to be made in preview.js and our storybook script in package.json.

Preview.js

import '../styles/globals.css';

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props => <img {...props} />
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

package.json

"storybook": "start-storybook -s ./public -p 6006",

That is it. Now you can use <Image /> tag in your storybook without any problems.Find the complete project REPO here.

teamxenox/storybook-with-next-and-tailwind
Contribute to teamxenox/storybook-with-next-and-tailwind development by creating an account on GitHub.
GitHubteamxenox