Adding storybook to a Typescript + Next.js project

The recommended way of adding storybook to a project using TypeScript on the official storybook documentation doesn’t actually work. It required a bit of tweaking but here is how to get it to work alongside a Next.js project.

My folder structure is as follows:

├── .storybook
├── public
│   ├── favicon.ico
│   ├── ...
└── src
    ├── components
    │   ├── Accordion
    │   ├── Alert
    │   ├── Box
    │   ├── ...
    ├── pages
    └── util

With each storybook.tsx file belonging inside it’s respective component folder.

First fetch the necessary libraries.

yarn add @storybook/react babel-loader babel-preset-react-app

Then to get storybook working add the two following files.


import { configure } from '@storybook/react'

configure(require.context('../src/components', true, /\.stories\.tsx?$/), module)


module.exports = ({ config }) => {
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            presets: [require.resolve('babel-preset-react-app')],

    config.resolve.extensions.push('.ts', '.tsx');
    return config;

January 20, 2020

Previous post
Compressing all pngs in a directory with pngquant On a project I’m working on currently we’ve been using a lot of uncompressed png’s, which is killing the pageload of nearly every section. I didn’t
Next post
Fixing flashes of white in react-navigation I was having a consistently annoying issue whilst trying to build a react-native app for iOS. Whenever I would navigate between pages (stacks),