Next.js ▲ + Typescript + Storybook The Really Simple Guide 2019
Tags: react, storybook, nextjs, tutorial
Published: 2019-11-25 15:29:23

---
title: Next.js ▲ + Typescript + Storybook The Really Simple Guide 2019
published: true
description: Simple guide to setup Nextjs, typescript and storybook.
canonical_url: https://www.adrianprieto.com/next-js-typescript-storybook-the-really-simple-guide-2019
tags: react, storybook, nextjs, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ndlyvnm4vgiqaeobogc9.jpg
---

## 1. Create a Basic Project

```
mkdir my-app
cd my-app
yarn init -y 
yarn add react react-dom next 
mkdir pages
```
Then, open the `package.json` file in the root directory and replace `scripts` with the following:

```json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

We’ll also need a page to render, let’s create `pages/index.tsx`:

```jsx
const Home = () => <h1>Hello world!</h1>;

export default Home;
```

## 2. Add Typescript and @types

```
yarn add -D typescript @types/react @types/node
```
Start the dev server:

```
yarn dev
```
You should see the following warning in your terminal window:
```
We detected TypeScript in your project and created a tsconfig.json file for you.
```

now there should be a `tsconfig.json` file in the root of your project.

**Optional**: Let’s change the strict field in the `tsconfig.json` file that was generated for us, like so:

```json
"strict": true
```

Now restart the development server, so Next.js can use the updated `tsconfig.json`, and wait for the browser to reload.

## 3. Add Storybook

```
yarn add -D @storybook/react @babel/core babel-loader babel-preset-react-app
```

Add the storybook script to the `package.json` file `scripts`:

```json
{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}
```

Now create a `.storybook`  folder in `my-app`  directory. Then we need to add a config file and a webpack config file inside the `.storybook` directory:

```
mkdir .storybook
cd .storybook
touch config.js webpack.config.js
```

### config.js

```js
// .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('../src/stories', true, /\.stories\.tsx?$/), module);
```

### webpack.config.js

```js
// .storybook/webpack.config.js

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

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

Notice that I am configuring the `stories` directory to be inside the the `src` directory in `config.js`, you can place your stories wherever you want, just make sure you specify the correct path in the `config.js` file and the `tsconfig.json`  file (if necessary).

We haven’t created those directories yet, so lets go ahead and do that in the root directory:

```
mkdir src 
cd src 
mkdir stories
```

## 4. Create a Story

Let’s create a button component inside `src/components` so that we can see if storybook is working properly:

```
cd src
mkdir components
cd components
touch Button.tsx
```

```jsx
import * as React from 'react';

type Props = {
  text: string;
};

export default ({ text }: Props) => <button>{text}</button>;
```

Now that we have a component, lets create a story in the stories directory:

```jsx
// src/stories/Button.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';

storiesOf('Button', module).add('with text', () => {
  return <Button text="Click Me" />;
});
```

Start storybook:

```
yarn storybook
```

A browser window should open up in `http://localhost:6006/` and storybook should render the story 😀.

![Storybook window](https://thepracticaldev.s3.amazonaws.com/i/jgxj0a3g3pibxbzxluje.jpg)

That’s it! 🚀

Originally posted [here](https://www.adrianprieto.com/next-js-typescript-storybook-the-really-simple-guide-2019).