DEV Community

Wonder2210
Wonder2210

Posted on

NextJS + Typescript + Storybook guide 2020

#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
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 = () => Hello Button;

export const withEmoji = () => (
Click me please
);
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

Top comments (6)

Collapse
 
cowglow profile image
Philip Saa •

Why copy the tsconfig file?

Collapse
 
wonder2210 profile image
Wonder2210 • • 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 •

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 •

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

Read next

getsiful profile image

Create a Single Page Application in React.js Using EasyFrontend

Siful Islam -

rohiitbagal profile image

Learning New Things

Rohit -

alexteng profile image

State Scope with Providers - Next.js with Jotai

Alex T. -

yaten2302 profile image

How to use supabase + ReactJS?

Yaten Dhingra -