Merge pull request #23167 from storybookjs/valentin/support-disable-s…

…tatic-images-prop-in-nextjs

Next.js: Support disableStaticImages setting

(cherry picked from commit eda9fc2)

code/frameworks/nextjs/src/images/webpack.ts

@@ -1,13 +1,14 @@
 import semver from 'semver';
 import type { Configuration as WebpackConfig, RuleSetRule } from 'webpack';
+import type { NextConfig } from 'next';
 import { addScopedAlias, getNextjsVersion } from '../utils';
 
-export const configureImages = (baseConfig: WebpackConfig): void => {
-  configureStaticImageImport(baseConfig);
+export const configureImages = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
+  configureStaticImageImport(baseConfig, nextConfig);
   addScopedAlias(baseConfig, 'next/image');
 };
 
-const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
+const configureStaticImageImport = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
   const version = getNextjsVersion();
   if (semver.lt(version, '11.0.0')) return;
 
@@ -31,6 +32,7 @@ const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
         loader: require.resolve('@storybook/nextjs/next-image-loader-stub.js'),
         options: {
           filename: assetRule.generator?.filename,
+          nextConfig,
         },
       },
     ],

code/frameworks/nextjs/src/next-image-loader-stub.ts

@@ -2,13 +2,15 @@
 import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
+import type { NextConfig } from 'next';
 
 interface LoaderOptions {
   filename: string;
+  nextConfig: NextConfig;
 }
 
 const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (content) {
-  const { filename } = this.getOptions();
+  const { filename, nextConfig } = this.getOptions();
   const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), {
     context: this.rootContext,
     content,
@@ -18,6 +20,10 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (conten
 
   const { width, height } = imageSizeOf(this.resourcePath);
 
+  if (nextConfig.images?.disableStaticImages) {
+    return `const src = '${outputPath}'; export default src;`;
+  }
+
   return `export default ${JSON.stringify({
     src: outputPath,
     height,

code/frameworks/nextjs/src/preset.ts

@@ -148,7 +148,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   configureRuntimeNextjsVersionResolution(baseConfig);
   configureImports({ baseConfig, configDir: options.configDir });
   configureCss(baseConfig, nextConfig);
-  configureImages(baseConfig);
+  configureImages(baseConfig, nextConfig);
   configureRouting(baseConfig);
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);