NextJS + Typescript + Storybook guide 2020
Tags: typescript, tutorial, firstpost, beginners
Published: 2020-03-30 23:11:23

---
title: NextJS + Typescript + Storybook guide 2020
published: true
description: Easy configuration for Nextjs + Typescript + Storybook
tags: #typescript #tutorial #firstpost #beginners #
---

In the last year of developing with react i tried many stacks and each one have a different case of use, nowadays i can say that this is my favorite Stack for React apps (without talk about any state management system ) and this is my steps to get it running

**requirements**:
* node > v10
* yarn 

# 1. Initialize the Project
<code>
```bash
mkdir my-app
cd my-app
yarn init -y 
yarn add react react-dom next -S
```
</code>
create pages directory
<code>
```bash
cd my-app
mkdir pages
```
</code>
and in youre package.json add these scripts 
<code>
```json
{
...
     "scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
...
}
```
</code>
# 2. Add Typescript
In pages folder create index.tsx 
<code>
```typescript
import * as React from 'react';

const app = ()=>{
      return(<h1>Hello world</h1>)
}
export default app;
```
</code>
and in project path create 
<code>
```bash
touch tsconfig.json
```
</code>
add these packages 
<code>
```bash
 yarn add --dev typescript @types/react @types/node
```
</code>
then run  
<code>
```bash
yarn run dev
```
</code>
now we have typescript working with Next 
# 3. Adding Storybook
Storybook is an amazing tool to test components in isolation , for react , vue , Angular ... Is pretty useful on any project , specially when you are using some design metodology as Atomic Design.
First we need to add.
<code>
```bash
yarn add @storybook/react babel-loader @babel/core -D
```
</code>
create .storybook folder
<code>
```bash
mkdir .storybook
```
</code>
storybook out of the box does'nt accept Typescript , before use it is needed add some configurations and packages
<code>
```bash
yarn add awesome-typescript-loader react-docgen-typescript-loader -D
```
</code>
in /.storybook we are going to create his own tsconfig.json file
<code>
```bash
cp ./tsconfig.json ./.storybook/
```
</code>
in this case we are going to copy and paste the tsconfig file from our project path and change the follow fields 
<code>
```json
...
"include": [
    "../types.d.ts",
    "../next-env.d.ts",
    "../**/*.stories.ts",
    "../**/*.stories.tsx"
  ]
```
</code>
then , create /.storybook/main.js
<code>
```javascript
const path = require('path');
module.exports = {
    stories: ['../components/**/**/*.stories.tsx'],
        webpackFinal: async config => {
          config.module.rules.push({
            test: /\.(ts|tsx)$/,
            use: [
              {
                loader: require.resolve('awesome-typescript-loader'),
                options:{
                  configFileName: path.resolve(__dirname, './tsconfig.json')
                }
              },
              // Optional
              {
                loader: require.resolve('react-docgen-typescript-loader'),
                options:{
                  tsconfigPath: path.resolve(__dirname, './tsconfig.json'),

                }
              },
            ],
          });
          config.resolve.extensions.push('.ts', '.tsx');
          return config;
        },
        };
```
</code>
add the script to package.json 
<code>
```json
{
"scripts": {
  ...,
"storybook": "start-storybook"
}
}
```
</code>
write a test history inside components/button/index.stories.tsx
<code>
```typescript
import * as React from 'react';

export default { title: 'Button' };

export const withText = () => <button>Hello Button</button>;

export const withEmoji = () => (
  <button>Click me please</button>
);
```
</code>
you should see this screen on your Browser 
![Storybook](https://user-images.githubusercontent.com/29363763/77968943-1213a080-72d8-11ea-97b6-b44a5e812006.PNG)
Thanks for read , this is my first post on DEV :) any question or suggestion Leave A Comment In The Comments Box
Thanks Again :D