NextJS: Turn withStorybook into ergonomic module export

code/frameworks/nextjs-server/package.json

@@ -122,7 +122,7 @@
       "./src/null-renderer.ts",
       "./src/preset.ts",
       "./src/mock.ts",
-      "./src/next-config.ts",
+      "./src/next-config.cts",
       "./src/pages/index.ts",
       "./src/reexports/channels.ts",
       "./src/reexports/core-events.ts",

code/frameworks/nextjs-server/src/next-config.ts → code/frameworks/nextjs-server/src/next-config.cts

@@ -48,14 +48,52 @@ function addRewrites(
   };
 }
 
-export const withStorybook = ({
+interface WithStorybookOptions {
+  /**
+   * Port that the Next.js app will run on.
+   * @default 3000
+   */
+  port: string | number;
+
+  /**
+   * Internal port that Storybook will run on.
+   * @default 34567
+   */
+  sbPort: string | number;
+
+  /**
+   * URL path to Storybook's "manager" UI.
+   * @default 'storybook'
+   */
+  managerPath: string;
+
+  /**
+   * URL path to Storybook's story preview iframe.
+   * @default 'storybook-preview'
+   */
+  previewPath: string;
+
+  /**
+   * Directory where Storybook's config files are located.
+   * @default '.storybook'
+   */
+  configDir: string;
+
+  /**
+   * Whether to use the NextJS app directory.
+   * @default undefined
+   */
+  appDir: boolean;
+}
+
+const withStorybook = ({
   port = process.env.PORT ?? 3000,
   sbPort = 34567,
   managerPath = 'storybook',
   previewPath = 'storybook-preview',
   configDir = '.storybook',
   appDir = undefined,
-} = {}) => {
+}: Partial<WithStorybookOptions> = {}) => {
   const isAppDir = appDir ?? existsSync('app');
   const storybookNextJSOptions: StorybookNextJSOptions = {
     appDir: isAppDir,
@@ -132,3 +170,5 @@ export const withStorybook = ({
     ]),
   });
 };
+
+module.exports = withStorybook;

code/lib/cli/src/initiate.ts

@@ -404,9 +404,8 @@ async function doInitiate(
     logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n'));
     logger.log(`To set up Storybook, replace contents of ${chalk.cyan('next-config.js')} with:\n`);
     codeLog([
-      "const { withStorybook } = require('@storybook/nextjs-server/next-config');",
-      'const nextConfig = withStorybook()({ /* your custom config here */ });',
-      'module.exports = nextConfig;',
+      "const withStorybook = require('@storybook/nextjs-server/next-config')(/* storybook config */);",
+      'module.exports = withStorybook({ /* nextjs config */ });',
     ]);
     logger.log('\n Then to run your NextJS app:\n');
     codeLog([packageManager.getRunCommand('dev')]);