diff --git a/errors/custom-document-image-import.md b/errors/custom-document-image-import.md
index 86dd4087d0557..64ff9af1e8fb6 100644
--- a/errors/custom-document-image-import.md
+++ b/errors/custom-document-image-import.md
@@ -28,8 +28,19 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+If your application is not using image imports with `next/image`, you can disable the built-in loader with the following next.config.js:
+
+```js
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
 ### Useful Links
 
 - [Custom `Document`](https://nextjs.org/docs/advanced-features/custom-document)
 - [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app)
 - [Static File Serving](https://nextjs.org/docs/basic-features/static-file-serving)
+- [Disable Static Image Imports](https://nextjs.org/docs/api-reference/next/image#disable-static-imports)
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 0de1e8e00c689..52933b9a4a94f 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1682,6 +1682,7 @@ export default async function getBaseWebpackConfig(
     productionBrowserSourceMaps: config.productionBrowserSourceMaps,
     future: config.future,
     experimental: config.experimental,
+    disableStaticImages: config.images.disableStaticImages,
   })
 
   // @ts-ignore Cache exists
diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
index 608c9e01c1072..0087b10e3bf62 100644
--- a/packages/next/build/webpack/config/index.ts
+++ b/packages/next/build/webpack/config/index.ts
@@ -19,6 +19,7 @@ export async function build(
     productionBrowserSourceMaps,
     future,
     experimental,
+    disableStaticImages,
   }: {
     rootDirectory: string
     customAppFile: RegExp
@@ -31,6 +32,7 @@ export async function build(
     productionBrowserSourceMaps: boolean
     future: NextConfigComplete['future']
     experimental: NextConfigComplete['experimental']
+    disableStaticImages: NextConfigComplete['disableStaticImages']
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
@@ -53,6 +55,10 @@ export async function build(
     experimental,
   }
 
-  const fn = pipe(base(ctx), css(ctx), images(ctx))
+  let fns = [base(ctx), css(ctx)]
+  if (!disableStaticImages) {
+    fns.push(images(ctx))
+  }
+  const fn = pipe(...fns)
   return fn(config)
 }
diff --git a/test/integration/invalid-document-image-import/next.config.js b/test/integration/invalid-document-image-import/next.config.js
new file mode 100644
index 0000000000000..7f3b71ab296bd
--- /dev/null
+++ b/test/integration/invalid-document-image-import/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  /* replaceme */
+}
diff --git a/test/integration/invalid-document-image-import/test/index.test.js b/test/integration/invalid-document-image-import/test/index.test.js
index edd1fb1cb9319..6e6fa16418f95 100644
--- a/test/integration/invalid-document-image-import/test/index.test.js
+++ b/test/integration/invalid-document-image-import/test/index.test.js
@@ -1,12 +1,16 @@
 /* eslint-env jest */
-import { nextBuild } from 'next-test-utils'
+import { nextBuild, File } from 'next-test-utils'
 import { join } from 'path'
 
 jest.setTimeout(1000 * 60 * 2)
 
+const appDir = join(__dirname, '../')
+const nextConfig = new File(join(appDir, 'next.config.js'))
+
 describe('Invalid static image import in _document', () => {
-  it('Should fail to build', async () => {
-    const appDir = join(__dirname, '..')
+  afterAll(() => nextConfig.restore())
+
+  it('Should fail to build when no next.config.js', async () => {
     const { code, stderr } = await nextBuild(appDir, [], {
       stderr: true,
     })
@@ -17,4 +21,24 @@ describe('Invalid static image import in _document', () => {
     )
     expect(stderr).toMatch(/Location:.*pages[\\/]_document\.js/)
   })
+
+  it('Should fail to build when disableStaticImages in next.config.js', async () => {
+    nextConfig.write(`
+      module.exports = {
+        images: {
+          disableStaticImages: true
+        }
+      }
+    `)
+    const { code, stderr } = await nextBuild(appDir, [], {
+      stderr: true,
+    })
+    expect(code).not.toBe(0)
+    expect(stderr).toMatch(
+      /You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file/
+    )
+    expect(stderr).not.toMatch(
+      /Images.*cannot.*be imported within.*pages[\\/]_document\.js/
+    )
+  })
 })