Next.js ▲ + Typescript + Storybook The Really Simple Guide 2019

1. Create a Basic Project

mkdir my-app
cd my-app
yarn init -y 
yarn add react react-dom next 
mkdir pages

Then, open the package.json file in the root directory and replace scripts with the following:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

We’ll also need a page to render, let’s create pages/index.tsx :

const Home = () => <h1>Hello world!</h1>;

export default Home;

2. Add Typescript and @types

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

Start the dev server:

yarn dev

You should see the following warning in your terminal window:

We detected TypeScript in your project and created a tsconfig.json file for you.

now there should be a tsconfig.json file in the root of your project.

Optional: Let’s change the strict field in the tsconfig.json file that was generated for us, like so:

"strict": true

Now restart the development server, so Next.js can use the updated tsconfig.json, and wait for the browser to reload.

3. Add Storybook

yarn add -D @storybook/react @babel/core babel-loader babel-preset-react-app

Add the storybook script to the package.json file scripts :

{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}

Now create a .storybook folder in my-app directory. Then we need to add a config file and a webpack config file inside the .storybook directory:

mkdir .storybook
cd .storybook
touch config.js webpack.config.js

config.js

// .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('../src/stories', true, /\.stories\.tsx?$/), module);

webpack.config.js

// .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Notice that I am configuring the stories directory to be inside the the src directory in config.js, you can place your stories wherever you want, just make sure you specify the correct path in the config.js file and the tsconfig.json file (if necessary).

We haven’t created those directories yet, so lets go ahead and do that in the root directory:

mkdir src 
cd src 
mkdir stories

4. Create a Story

Let’s create a button component inside src/components so that we can see if storybook is working properly:

cd src
mkdir components
cd components
touch Button.tsx

import * as React from 'react';

type Props = {
  text: string;
};

export default ({ text }: Props) => <button>{text}</button>;

Now that we have a component, lets create a story in the stories directory:

// src/stories/Button.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';

storiesOf('Button', module).add('with text', () => {
  return <Button text="Click Me" />;
});

Start storybook:

yarn storybook

A browser window should open up in http://localhost:6006/ and storybook should render the story 😀.

That’s it! 🚀

Author
Recent Posts

Adrian Prieto

“If you are not willing to learn, no one can help you. If you are determined to learn, no one can stop you.” ― Zig Ziglar