https://github.com/jedrzejginter/next-showcase

Very simple and basic alternative for Storybook working on Next.js.
https://github.com/jedrzejginter/next-showcase

nextjs react showcase storybook

Last synced: 19 days ago
JSON representation

Very simple and basic alternative for Storybook working on Next.js.

• Host: GitHub
• URL: https://github.com/jedrzejginter/next-showcase
• Owner: jedrzejginter
• License: mit
• Created: 2020-10-27T08:45:52.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-01T08:34:54.000Z (almost 4 years ago)
• Last Synced: 2024-12-20T20:17:22.116Z (about 2 months ago)
• Topics: nextjs, react, showcase, storybook
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@ginterdev/next-showcase
• Size: 872 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @ginterdev/next-showcase

> Very simple and basic alternative for Storybook working on Next.js.

![Next Showcase Screenshot](./screenshot.png)

## Warning :warning:

1. **This tool is completely Next.js-based, so it cannot be used without it (for now).** It has potential for working with non-Next.js apps, though.

2. **For now I am just experimenting. I DO NOT recommend using it for anything that is not just having fun after hours.**

3. **If you have questions or proposals** use GitHub issues.

This package makes some assumptions:

- you are using **Next.js** (>= 9)

- you are using **Typescript** (>= 3.9)

- your pages directory is `process.cwd()/pages`

## Installation

```bash

yarn add --dev @ginterdev/next-showcase

# or

npm i -D @ginterdev/next-showcase

```

## Usage

### Step 1

Start your Next.js application in watch mode.

```bash

next dev -p 3000

```

### Step 2 (optional)

:warning: This has to be done ONLY if you have [custom `App` component](https://nextjs.org/docs/advanced-features/custom-app).

Wrap you custom `App` component with `withShowcase`. This will skip all specific stuff for your project implemented inside `getInitialProps` as well and your custom component. You don't want to render header or footer as part of showcase page.

```tsx

import { withShowcase } from '@ginterdev/next-showcase';

function App() {

  // Implementation ommitted.

  return ...;

}

export default withShowcase(App);

```

### Step 3

Create your first stories file inside `src` directory (relative to `process.cwd()`).

```tsx

import type { ShowcaseStories } from '@ginterdev/next-showcase';

// Import of `Button` is ommitted.

const stories: ShowcaseStories = {

  'My First Story': () => ,

  'My Story With Dark Mode': {

    dark: true,

    Story: () => ,

  },

};

// Default export is important.

export default stories;

```

### Step 4

Finally run a watch server that will automatically update the showcase page whenever you add or modify some `*.stories.tsx` files.

```bash

npx @ginterdev/next-showcase

# Now go to http://localhost:3000/_next-showcase 🚀

```

---

Make sure to add `pages/_next-showcase` to your `.gitignore`.

## Customizing

You can set your own pathname instead of default `/_next-showcase` by specifying a configuration option in `.ginterdevrc.js` file:

```js

// .ginterdevrc.js

module.exports = {

  'next-showcase': {

    entryDir: 'ui-kit',

  },

};

```

Now your stories will be accessible under `/ui-kit`.\

(Notice that now you have to _gitignore_ `pages/ui-kit` instead of `pages/_next-showcase`).