Next.js + Storybook + Typescript : 2021 guide
Tags: nextjs, typescript, webdev
Published: 2021-03-04 15:59:35

The first post that I have ever done was about this topic, it was one year ago, and  many things have changed since that, and due to that this is a common toolkit, widely adopted for many developers and work teams, here is a little guide step by step updated to set up your project with next.js + storybook + typescript successfully 

##Initialize project:
create our folder and initialize the project with yarn:
```bash
mkdir nextstorybook
cd ./nextstorybook
yarn init -yes
```
let's install the main packages for our project:
```bash
yarn add next react react-dom
```
##Set Up Next.js with typescript
We'll need to create a "/pages" folder where we are going to hold our pages starting with index.tsx and add tsconfig.json
```bash
mkdir /pages
touch ./pages/index.tsx
touch tsconfig.json
```
and to our package.json
```json
...
 "scripts":{
       "dev": "next",
    "start": "next start",
    "build": "next build"
  },
...
```
and we need to install Typescript and the types needed to run next.js with
```bash
yarn add --dev typescript @types/react @types/node
```
fill your index.tsx with the following code:
```typescript
const Index = ()=>( <h1>Here i am</h1> );
export default Index;
```
now you can run 
```bash
yarn run dev
```
And we have next.js working with Typescript

##Storybook
if you have used before Storybook you should know that use typescript is not so easy ( well it doesn't use to be so easy ) , that chnged with Storybook 6.0’s , now the support to typescript is built-in with just run 
```bash
npx sb init
``` 
At this point, we are all done

##Using storybook:
until here we have everything set up and ready to start now you just have to run yarn run storybook and you should see something like 

![This](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2m3jyzvra7xfi2t4wnr.jpeg)

##Some useful tips
###Documentation :page_facing_up: :
If you are developing an Ui library or a larger set of component shared across a wide team, this would help you, now with storybook you can write the documentation for your components using MDX this helps to understand it better more info [here](https://storybook.js.org/docs/react/writing-docs/introduction)


###Using Theme Providers :art: :
if you are using a library like MaterialUI, ChakraUI, or any other that requires the use of a provider ( or decorator ) on top of your app, that code goes here on ./storybook/preview.js

```javascript
import React from 'react';

export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
```

###Use custom font family :capital_abcd::
To use the font of your choose, create in ./storybook a file named preview-head.html and put inside your font links:
```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

```
###Serving static files :file_folder::
to serve the files that you need from a specific folder you have to update the storybook script on package.json
From:
```json
...
"storybook": "start-storybook -p 6006",
...
```
To:
```json
"storybook": "start-storybook -s ./path_of_your_folder -p 6006",
```

#### Naming and hirearchy
To sort your components in folders like structure you have to set in your stories file 
```typescript
export default {
  title: 'Main class of components/Subtype/Components',
};
```
or 
```typescript
export default {
  title: 'Component type/Component',
};
```
![Hirearchy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy7qf58ldj0l8zlijnli.jpg)

I hope this post is useful for you if you have any other suggestion for the usage of storybook or the post or any doubt about it feel free to leave it in the comments below, you can also follow me here and in my twitter, any doubt feel free to ask :wave: