diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index 2f1e9ed84e75b26..afa4699a36a4912 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -25,7 +25,7 @@ async function createTreeCodeFromPath({
     // First item in the list is the page which can't have layouts by itself
     if (i === segments.length - 1) {
       // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
-      tree = `['', {}, {page: () => require('${pagePath}')}]`
+      tree = `['', {}, {page: () => require(${JSON.stringify(pagePath)})}]`
       continue
     }
 
@@ -48,12 +48,12 @@ async function createTreeCodeFromPath({
     }, {
       ${
         resolvedLayoutPath
-          ? `layout: () => require('${resolvedLayoutPath}'),`
+          ? `layout: () => require(${JSON.stringify(resolvedLayoutPath)}),`
           : ''
       }
       ${
         resolvedLoadingPath
-          ? `loading: () => require('${resolvedLoadingPath}'),`
+          ? `loading: () => require(${JSON.stringify(resolvedLoadingPath)}),`
           : ''
       }
     }]`
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index de362f9b5a5d037..55ec29ee011453d 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -4,7 +4,7 @@ import type { CustomRoutes } from '../../lib/load-custom-routes'
 import { getOverlayMiddleware } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
 import { IncomingMessage, ServerResponse } from 'http'
 import { WebpackHotMiddleware } from './hot-middleware'
-import { join, relative, isAbsolute } from 'path'
+import { join, relative, isAbsolute, posix } from 'path'
 import { UrlObject } from 'url'
 import {
   createEntrypoints,
@@ -666,9 +666,12 @@ export default class HotReloader {
                     this.appDir && bundlePath.startsWith('app/')
                       ? getAppEntry({
                           name: bundlePath,
-                          pagePath: join(
+                          pagePath: posix.join(
                             APP_DIR_ALIAS,
-                            relative(this.appDir!, entryData.absolutePagePath)
+                            posix.relative(
+                              this.appDir!,
+                              entryData.absolutePagePath
+                            )
                           ),
                           appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,