For a Design System I'm currently working on, we've decided to have the docs hosted under one domain, which include the traditional style of documentation, as well as playroom and storybook. We want users to be able to jump between the documentation and live examples in playroom or storybook but stay within the same app / domain. We're using Next.js for the docs in this case.

Here's how to host Storybook under a sub-route in Next.js, for this example, we'll be hosting it under the /storybook route.

Add manager-head.html

Add the following file under .storybook/

1<link rel="shortcut icon" type="image/x-icon" href="/storybook/favicon.ico">
2<script>
3    window['PREVIEW_URL'] = '/storybook/iframe.html';
4</script>
5

Change webpack config

Modify the .storybook/main.js as follows

1module.exports = {
2    ...
3    webpackFinal: async (config, { configType }) => {
4        config.output.publicPat = '/storybook/';
5        return config;
6    },
7    managerWebpack: async (config) => {
8        config.output.publicPath = '/storybook/';
9        return config;
10    },
11}
12

Build storybook into /public/

We'll serve storybook as a static app by building into the Next.js public folder . Just run the following during your build process.

1yarn build-storybook -o ./public/storybook
2