DEV Community

loading...

NextJS + Typescript + Storybook guide 2020

wonder2210 profile image Wonder2210 ・2 min read

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


mkdir my-app
cd my-app
yarn init -y 
yarn add react react-dom next -S
Enter fullscreen mode Exit fullscreen mode


create pages directory

cd my-app
mkdir pages
Enter fullscreen mode Exit fullscreen mode


and in youre package.json add these scripts

{
...
     "scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
...
}
Enter fullscreen mode Exit fullscreen mode

2. Add Typescript

In pages folder create index.tsx

import * as React from 'react';

const app = ()=>{
      return(<h1>Hello world</h1>)
}
export default app;
Enter fullscreen mode Exit fullscreen mode


and in project path create

touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode


add these packages

 yarn add --dev typescript @types/react @types/node
Enter fullscreen mode Exit fullscreen mode


then run


yarn run dev
Enter fullscreen mode Exit fullscreen mode


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.

yarn add @storybook/react babel-loader @babel/core -D
Enter fullscreen mode Exit fullscreen mode


create .storybook folder

mkdir .storybook
Enter fullscreen mode Exit fullscreen mode


storybook out of the box does'nt accept Typescript , before use it is needed add some configurations and packages

yarn add awesome-typescript-loader react-docgen-typescript-loader -D
Enter fullscreen mode Exit fullscreen mode


in /.storybook we are going to create his own tsconfig.json file

cp ./tsconfig.json ./.storybook/
Enter fullscreen mode Exit fullscreen mode


in this case we are going to copy and paste the tsconfig file from our project path and change the follow fields

...
"include": [
    "../types.d.ts",
    "../next-env.d.ts",
    "../**/*.stories.ts",
    "../**/*.stories.tsx"
  ]
Enter fullscreen mode Exit fullscreen mode


then , create /.storybook/main.js

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;
        },
        };
Enter fullscreen mode Exit fullscreen mode


add the script to package.json

{
"scripts": {
  ...,
"storybook": "start-storybook"
}
}
Enter fullscreen mode Exit fullscreen mode


write a test history inside components/button/index.stories.tsx

import * as React from 'react';

export default { title: 'Button' };

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

export const withEmoji = () => (
  <button>Click me please</button>
);
Enter fullscreen mode Exit fullscreen mode


you should see this screen on your Browser
Storybook
Thanks for read , this is my first post on DEV :) any question or suggestion Leave A Comment In The Comments Box
Thanks Again :D

Discussion (6)

pic
Editor guide
Collapse
cowglow profile image
Philip Saa 🇳🇱 #Amsterdam

Why copy the tsconfig file?

Collapse
wonder2210 profile image
Wonder2210 Author

Because , storybook need it to transpile our TS, and if you use the tsconfig in the main folder you will have errors like " you may need an additional loader to handle the result of these loaders", nowadays you can skip this tutorial , and use storybook 6 , doesn't need any config for TS ✌

Collapse
hood profile image
Andrea Cappuccio

You'd be better off using "extends" pointing to the original tsconfig file, instead of copying it altogether.

For reference: typescriptlang.org/tsconfig#extends

Thread Thread
wonder2210 profile image
Wonder2210 Author

Thanks i didn't know that ✌👍 , nowadays with storybook 6 is not needed any special config , in the next days i'll do an update !!

Collapse
delta456 profile image
Swastik Baranwal

I couldn't see any of the images.

Collapse
wonder2210 profile image
Wonder2210 Author

It seems to be a bug from DEV There is only one image and it is user-images.githubusercontent.com/...)