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


Enter fullscreen mode Exit fullscreen mode


bash
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


Enter fullscreen mode Exit fullscreen mode


bash
cd my-app
mkdir pages


Enter fullscreen mode Exit fullscreen mode

and in youre package.json add these scripts


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

2. Add Typescript

In pages folder create index.tsx


Enter fullscreen mode Exit fullscreen mode


typescript
import * as React from 'react';

const app = ()=>{
return(

Hello world

)
}
export default app;

Enter fullscreen mode Exit fullscreen mode

and in project path create


Enter fullscreen mode Exit fullscreen mode


bash
touch tsconfig.json


Enter fullscreen mode Exit fullscreen mode

add these packages


Enter fullscreen mode Exit fullscreen mode


bash
yarn add --dev typescript @types/react @types/node


Enter fullscreen mode Exit fullscreen mode

then run


Enter fullscreen mode Exit fullscreen mode


bash
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.


Enter fullscreen mode Exit fullscreen mode


bash
yarn add @storybook/react babel-loader @babel /core -D


Enter fullscreen mode Exit fullscreen mode

create .storybook folder


Enter fullscreen mode Exit fullscreen mode


bash
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


Enter fullscreen mode Exit fullscreen mode


bash
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


Enter fullscreen mode Exit fullscreen mode


bash
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


Enter fullscreen mode Exit fullscreen mode


json
...
"include": [
"../types.d.ts",
"../next-env.d.ts",
"..//*.stories.ts",
"../
/*.stories.tsx"
]


Enter fullscreen mode Exit fullscreen mode

then , create /.storybook/main.js


Enter fullscreen mode Exit fullscreen mode


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

Enter fullscreen mode Exit fullscreen mode

add the script to package.json


Enter fullscreen mode Exit fullscreen mode


json
{
"scripts": {
...,
"storybook": "start-storybook"
}
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode


typescript
import * as React from 'react';

export default { title: 'Button' };

export const withText = () => ;

export const withEmoji = () => (

);


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 • Edited

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/...)