@ginterdev/next-showcase

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

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

yarn add --dev @ginterdev/next-showcase

# or

npm i -D @ginterdev/next-showcase

Usage

Step 1

Start your Next.js application in watch mode.

next dev -p 3000

Step 2 (optional)

:warning: This has to be done ONLY if you have custom App component.

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.

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()).

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

// Import of `Button` is ommitted.

const stories: ShowcaseStories = {
  'My First Story': () => <Button />,
  'My Story With Dark Mode': {
    dark: true,
    Story: () => <Button />,
  },
};

// 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.

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:

// .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).