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 👋
Top comments (3)
To use storybook I needed to use the following package as a dev dependency:
yarn add @storybook/cli --dev
then,
yarn sb init
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
I can't install using npx sb init command
So I tried this npx sb upgrade --prerelease