Exposing Storybook via NextJS route

Question

I have a NextJS app and am using Storybook to develop my components.
After looking through all the NextJS routing documentation, I can't find a way to route to my storybook from within NextJS. Only access pages within the /pages directory.
What I would like to do it to have my StoryBook available at /styleguide from within my Next app thought all environments.
Is someone able to help?

Answer 1

Short answer: No, you can not do that.

But you can always redirect the url /styleguide to another domain where Storybook is running, for example styleguide.example.com. Here, an example based on the official documentation:

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/styleguide',
        destination: 'https://styleguide.example.com',
        permanent: true,
      },
    ]
  },
}

If your URL's would have any parameters for it's origin that you would want to append to the redirects destination, NextJS provides a feature to do just that.

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/styleguide/:pageId/:slug',
        destination: 'https://styleguide.example.com/:pageId/:slug',
        permanent: true,
      },
    ]
  },
}