From 2cf3b3b89d8f8efd19fbfd30ce0f1eb00342e09c Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 21 Jun 2023 10:30:28 +0200
Subject: [PATCH] Support disableStaticImages setting in Nextjs

---
 code/frameworks/nextjs/src/images/webpack.ts         | 8 +++++---
 code/frameworks/nextjs/src/next-image-loader-stub.ts | 8 +++++++-
 code/frameworks/nextjs/src/preset.ts                 | 2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/code/frameworks/nextjs/src/images/webpack.ts b/code/frameworks/nextjs/src/images/webpack.ts
index df6ecacde83e..967387f7b027 100644
--- a/code/frameworks/nextjs/src/images/webpack.ts
+++ b/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,
         },
       },
     ],
diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts
index 9bb282834f10..04a97fdead81 100644
--- a/code/frameworks/nextjs/src/next-image-loader-stub.ts
+++ b/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,
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 32696a82b8f6..238ba2bb170e 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/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);