DEV Community

Cover image for Next.js + Storybook + Typescript : 2021 guide
Wonder2210
Wonder2210

Posted on

Next.js + Storybook + Typescript : 2021 guide

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:

mkdir nextstorybook
cd ./nextstorybook
yarn init -yes
Enter fullscreen mode Exit fullscreen mode

let's install the main packages for our project:

yarn add next react react-dom
Enter fullscreen mode Exit fullscreen mode

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

mkdir /pages
touch ./pages/index.tsx
touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode

and to our package.json

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

and we need to install Typescript and the types needed to run next.js with

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

fill your index.tsx with the following code:

const Index = ()=>( <h1>Here i am</h1> );
export default Index;
Enter fullscreen mode Exit fullscreen mode

now you can run

yarn run dev
Enter fullscreen mode Exit fullscreen mode

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

npx sb init
Enter fullscreen mode Exit fullscreen mode

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

Some useful tips

Documentation 📄 :

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

Using Theme Providers 🎨 :

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

import React from 'react';

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

Use custom font family 🔠:

To use the font of your choose, create in ./storybook a file named preview-head.html and put inside your font links:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

Enter fullscreen mode Exit fullscreen mode

Serving static files 📁:

to serve the files that you need from a specific folder you have to update the storybook script on package.json
From:

...
"storybook": "start-storybook -p 6006",
...
Enter fullscreen mode Exit fullscreen mode

To:

"storybook": "start-storybook -s ./path_of_your_folder -p 6006",
Enter fullscreen mode Exit fullscreen mode

Naming and hirearchy

To sort your components in folders like structure you have to set in your stories file

export default {
  title: 'Main class of components/Subtype/Components',
};
Enter fullscreen mode Exit fullscreen mode

or

export default {
  title: 'Component type/Component',
};
Enter fullscreen mode Exit fullscreen mode

Hirearchy

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 👋

Top comments (3)

Collapse
 
dramoslace profile image
Deiby Dayans R

To use storybook I needed to use the following package as a dev dependency:

yarn add @storybook/cli --dev

then,

yarn sb init

Collapse
 
rickvian profile image
Rickvian Aldi

Thanks this worked for me!
i was using npx sb init following the official doc, and it messed up my package (some package is missing etc)
i delete my node modules, redo yarn install,
do your recommendation, and it worked

Collapse
 
acatzk profile image
acatzk

I can't install using npx sb init command
So I tried this npx sb upgrade --prerelease