DEV Community

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

Next.js + Storybook + Typescript : 2021 guide

wonder2210 profile image Wonder2210 ・3 min read

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 👋

Discussion (0)

pic
Editor guide