diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index 8d28e96c2af5..dc539aee872b 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -147,6 +147,7 @@ export default class HotReloader {
   private buildId: string
   private middlewares: any[]
   private pagesDir: string
+  private distDir: string
   private webpackHotMiddleware?: WebpackHotMiddleware
   private config: NextConfigComplete
   private runtime?: 'nodejs' | 'edge'
@@ -170,12 +171,14 @@ export default class HotReloader {
     {
       config,
       pagesDir,
+      distDir,
       buildId,
       previewProps,
       rewrites,
     }: {
       config: NextConfigComplete
       pagesDir: string
+      distDir: string
       buildId: string
       previewProps: __ApiPreviewProps
       rewrites: CustomRoutes['rewrites']
@@ -185,6 +188,7 @@ export default class HotReloader {
     this.dir = dir
     this.middlewares = []
     this.pagesDir = pagesDir
+    this.distDir = distDir
     this.clientStats = null
     this.serverStats = null
     this.serverPrevDocumentHash = null
@@ -435,15 +439,15 @@ export default class HotReloader {
     startSpan.stop() // Stop immediately to create an artificial parent span
 
     await this.clean(startSpan)
+
     // Ensure distDir exists before writing package.json
-    await fs.mkdir(this.config.distDir, { recursive: true })
+    await fs.mkdir(this.distDir, { recursive: true })
+
+    const distPackageJsonPath = join(this.distDir, 'package.json')
 
     // Ensure commonjs handling is used for files in the distDir (generally .next)
     // Files outside of the distDir can be "type": "module"
-    await fs.writeFile(
-      join(this.config.distDir, 'package.json'),
-      '{"type": "commonjs"}'
-    )
+    await fs.writeFile(distPackageJsonPath, '{"type": "commonjs"}')
 
     const configs = await this.getWebpackConfig(startSpan)
 
diff --git a/packages/next/server/dev/next-dev-server.ts b/packages/next/server/dev/next-dev-server.ts
index faa55463fc65..ce87caa9f6ae 100644
--- a/packages/next/server/dev/next-dev-server.ts
+++ b/packages/next/server/dev/next-dev-server.ts
@@ -380,6 +380,7 @@ export default class DevServer extends Server {
 
     this.hotReloader = new HotReloader(this.dir, {
       pagesDir: this.pagesDir!,
+      distDir: this.distDir,
       config: this.nextConfig,
       previewProps: this.getPreviewProps(),
       buildId: this.buildId,