rsnext/examples/with-storybook-typescript
Hyeungshik Jung c8dbc7e572
Add [with-storybook-typescript] example (#14398)
Basically this PR adds Next.js 's default TypeScript setting and integrates [@storybook/preset-typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript) into original [with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook) example. 

However, I thought it may save time for someone who are planning to use storybook with next.js and TypeScript :)
2020-06-25 15:26:47 +00:00
..
.storybook Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
components Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
pages Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
stories Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
next-env.d.ts Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
package.json Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
README.md Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00
tsconfig.json Add [with-storybook-typescript] example (#14398) 2020-06-25 15:26:47 +00:00

Example app with Storybook and TypeScript.

This example shows a default set up of Storybook plus TypeScript, using @storybook/preset-typescript. Also included in the example is a custom component included in both Storybook and the Next.js application.

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-storybook-typescript with-storybook-app
# or
yarn create next-app --example with-storybook-typescript with-storybook-app

Download manually

Download the example:

curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-storybook-typescript
cd with-storybook-typescript

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Run Storybook

npm run storybook
# or
yarn storybook

Build Static Storybook

npm run build-storybook
# or
yarn build-storybook

You can use Vercel to deploy Storybook. Specify storybook-static as the output directory.