diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index de209961f1a1d..6695cc10f354d 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -372,7 +372,7 @@ export default async function getBaseWebpackConfig(
 
   const babelConfigFile = getBabelConfigFile(dir)
 
-  if (hasCustomExportOutput(config)) {
+  if (!dev && hasCustomExportOutput(config)) {
     config.distDir = '.next'
   }
   const distDir = path.join(dir, config.distDir)
diff --git a/test/integration/app-dir-export/next.config.js b/test/integration/app-dir-export/next.config.js
index 307e966cb1f1a..4f31b8c212766 100644
--- a/test/integration/app-dir-export/next.config.js
+++ b/test/integration/app-dir-export/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  // distDir: '.next-custom',
   trailingSlash: true,
   generateBuildId() {
     return 'test-build-id'
diff --git a/test/integration/app-dir-export/test/dev-custom-dist-dir.test.ts b/test/integration/app-dir-export/test/dev-custom-dist-dir.test.ts
new file mode 100644
index 0000000000000..e64d07f475b75
--- /dev/null
+++ b/test/integration/app-dir-export/test/dev-custom-dist-dir.test.ts
@@ -0,0 +1,36 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import fs from 'fs-extra'
+import {
+  fetchViaHTTP,
+  File,
+  findPort,
+  killApp,
+  launchApp,
+} from 'next-test-utils'
+
+const appDir = join(__dirname, '..')
+const distDir = join(appDir, '.next-custom')
+const nextConfig = new File(join(appDir, 'next.config.js'))
+let app
+let appPort
+
+describe('app dir - with output export and custom distDir (next dev)', () => {
+  beforeAll(async () => {
+    nextConfig.replace('// distDir', 'distDir')
+    appPort = await findPort()
+    app = await launchApp(appDir, appPort)
+  })
+  afterAll(async () => {
+    nextConfig.restore()
+    await fs.remove(distDir)
+    await killApp(app)
+  })
+
+  it('should render properly', async () => {
+    const res = await fetchViaHTTP(appPort, '/')
+    expect(res.status).toBe(200)
+    expect(await res.text()).toContain('Home')
+  })
+})