In the last year of developing with react i tried many stacks and each one have a different case of use, nowadays i can say that this is my favorite Stack for React apps (without talk about any state management system ) and this is my steps to get it running

requirements:

• node > v10
• yarn

1. Initialize the Project

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

create pages directory

bash
cd my-app
mkdir pages

and in youre package.json add these scripts

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

2. Add Typescript

In pages folder create index.tsx

typescript
import * as React from 'react';

const app = ()=>{
return(

Hello world

and in project path create

bash
touch tsconfig.json

add these packages

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

then run

bash
yarn run dev

now we have typescript working with Next

3. Adding Storybook

Storybook is an amazing tool to test components in isolation , for react , vue , Angular ... Is pretty useful on any project , specially when you are using some design metodology as Atomic Design.
First we need to add.

bash
yarn add @storybook/react babel-loader @babel/core -D

create .storybook folder

bash
mkdir .storybook

storybook out of the box does'nt accept Typescript , before use it is needed add some configurations and packages

bash
yarn add awesome-typescript-loader react-docgen-typescript-loader -D

in /.storybook we are going to create his own tsconfig.json file

bash
cp ./tsconfig.json ./.storybook/

in this case we are going to copy and paste the tsconfig file from our project path and change the follow fields

json
...
"include": [
"../types.d.ts",
"../next-env.d.ts",
"..//*.stories.ts",
"..//*.stories.tsx"
]

then , create /.storybook/main.js

javascript
const path = require('path');
module.exports = {
stories: ['../components///*.stories.tsx'],
webpackFinal: async config => {
config.module.rules.push({
test: /.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options:{
configFileName: path.resolve(dirname, './tsconfig.json')
}
},
// Optional
{
loader: require.resolve('react-docgen-typescript-loader'),
options:{
tsconfigPath: path.resolve(dirname, './tsconfig.json'),

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

add the script to package.json

json
{
"scripts": {
...,
"storybook": "start-storybook"
}
}

write a test history inside components/button/index.stories.tsx

typescript
import * as React from 'react';

export default { title: 'Button' };

export const withText = () => Hello Button;

export const withEmoji = () => (
Click me please
);

you should see this screen on your Browser

Thanks for read , this is my first post on DEV :) any question or suggestion Leave A Comment In The Comments Box
Thanks Again :D