7 min read
Sometimes it is easier to build a component in isolation than in the place where it will be used. It is much easier to test all variations and edge cases of the component. There are tools out there which can help us to build our components in isolation. The most famous is Storybook, but I like to use Ladle. Ladle is much smaller than Storybook and it is built for speed. In this post we will set up Ladle and we will learn how we can use next/image within Ladle.
First we have to install Ladle:
And for most installations, that's it.
Ladle has a useful default configuration,
you only need to create a configuration if your installation differs from the default.
But for most Next.js installations the default does not fit.
Ladle expects stories and components in the "src" folder,
but in many Next.js installations they are in a folder called components.
So we have to create a configuration at
With this configuration ladle is able to find our stories. A good time to write our first story.
We want to create our first Story for the following component.
We want to create a story which shows us all sizes of the
Avatar component next to each other.
To create a new story we have to create a story file next to our component:
Now it is time to start Ladle.
Ladle should show 2 stories below
Default which shows our component within its default size and
Sizes which shows the component in all available sizes next to each other.
With a little bit of typescript magic, we can avoid the duplicate definitions of the sizes.
After we got Ladle running and wrote our first story,
we want to develop our component further.
We want to use next/image instead of
img to get all the advantages of next/image.
So we just replace the
img tag with the
Image tag from next/image.
But now we get an error in ladle.
After a short research session I found the following issue on GitHub.
One of the comments provided the following solution.
We have to create a file called
vite.config.ts in the root of our project.
That fixes the
process is not defined error,
but we immediately get the next error.
Uncaught Error: Invalid src prop (https://robohash.org/sdorra.dev) on
next/image, hostname "robohash.org" is not
configured under images in your
next.config.js See more info:
All right, but we don't want to add the entry to
next.config.js at all,
since this is just test data and besides,
we still get the same error when we make the entry.
After another look at issue #100,
we can tell next/image that it should skip the optimization if the component is rendered in Ladle.
That is fine, because the bandwidth does not play a big role during the development.
With the following code placed inside
... we can add the
unoptimized to each usage of
Great, that fixed our problem.
But unfortunately only in the development mode of Ladle.
If we run the production build (
ladle build and
ladle preview), we get the next error.
Our solution does not work with the production build, we have to find another solution.
Fortunately, I thought of another way to get the
unoptimized prop to all image instances.
We can create an alias for the
next/image import and resolve
next/image to a custom component.
This can be done in the
Now we can write our own image component to
But what if we want to use the original
next/image in our component?
In order to achieve this we can define another alias in the
Now we should have everything together to make our
After that we only have to remove the workaround from
we can remove the complete file if it has no other content.
After a quick look into Ladle (production and development mode),
we can see that we have finally solved the problem.
Posted in: ladle, nextjs, react, typescript