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

let's install the main packages for our project:

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

mkdir /pages
touch ./pages/index.tsx
touch tsconfig.json

and to our package.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

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

fill your index.tsx with the following code:

const Index = ()=>( <h1>Here i am</h1> );
export default Index;

now you can run

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

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

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>];

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" />

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",
...

To:

"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

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

or

export default {
  title: 'Component type/Component',
};

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 👋

Comments

[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

[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

[acatzk]

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