Component development with ladle and next/image

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Access the most powerful time series database as a service
  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    import Avatar, { sizes } from "./Avatar"; export const Default = () => ( ); // We can now create an array of sizes from the exported object. // Unfortunately we have to cast the array using `as`, // because `Object.keys` only returns `string[]`. // const sizeKeys = Object.keys(sizes) as Size[]; export const Sizes = () => (

    {/* We can loop over the array of sizes */} { => ( )} div> );

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • ladle

    🥄 Develop, test and document your React story components faster.

    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 .ladle/components.tsx ...

  • Next.js

    The React Framework

    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 .ladle/config.mjs:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts