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:

1├── .storybook
2├── public
3│   ├── favicon.ico
4│   ├── ...
5└── src
6    ├── components
7    │   ├── Accordion
8    │   ├── Alert
9    │   ├── Box
10    │   ├── ...
11    ├── pages
12    └── util
13

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.

./storybook/config.js

1import { configure } from '@storybook/react'
2
3configure(require.context('../src/components', true, /\.stories\.tsx?$/), module)
4

./storybook/webpack.config.js

1module.exports = ({ config }) => {
2    config.module.rules.push({
3        test: /\.(ts|tsx)$/,
4        loader: require.resolve('babel-loader'),
5        options: {
6            presets: [require.resolve('babel-preset-react-app')],
7        },
8    });
9
10    config.resolve.extensions.push('.ts', '.tsx');
11    return config;
12};
13