NextJS: dev only pages

I would like to create a /storybook page. But this page is for development purpose only. I mean, I don't want this page to be accessible in production mode.

How can we achieve that?

I'm not sure what the best way to do this is. I think you have a couple of approaches.

With Next.js 9.5+

You can use rewrite to make sure traffics to /storybook will go to your 404 page.

// next.config.js
// more configs
  async rewrites() {
    return [
      {
        source: '/storybook',
        destination: process.env.NODE_ENV === 'production' ? '/404' : '/storybook',
      }
    ];
  },
// more configs

With Next.js 10+

You can use the notFound attribute in your getServerSideProps or getStaticProps. For more information, you can find the doc here

// or getServerSideProps
export function getStaticProps() {
  return {
    // returns the default 404 page with a status code of 404 in production
     notFound: process.env.NODE_ENV === 'production'
  }
}

With Custom Server

Depends on the server framework, you can do the redirect to 404 there.