diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index 633eedbdc95a9a9..bf7a405e191336f 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -12,7 +12,7 @@ async function createTreeCodeFromPath({
   removeExt: (pathToRemoveExtensions: string) => string
 }) {
   let tree: undefined | string
-  const splittedPath = pagePath.split('/')
+  const splittedPath = pagePath.split(/[\\/]/)
   const appDirPrefix = splittedPath[0]
 
   const segments = ['', ...splittedPath.slice(1)]
@@ -26,7 +26,9 @@ async function createTreeCodeFromPath({
     if (i === segments.length - 1) {
       const resolvedPagePath = await resolve(pagePath)
       // 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 = `['', {}, {filePath: '${resolvedPagePath}', page: () => require('${resolvedPagePath}')}]`
+      tree = `['', {}, {filePath: ${JSON.stringify(
+        resolvedPagePath
+      )}, page: () => require(${JSON.stringify(resolvedPagePath)})}]`
       continue
     }
 
@@ -47,15 +49,15 @@ async function createTreeCodeFromPath({
         children ? `children: ${children},` : ''
       }
     }, {
-      filePath: '${resolvedLayoutPath}', 
+      filePath: '${resolvedLayoutPath}',
       ${
         resolvedLayoutPath
-          ? `layout: () => require('${resolvedLayoutPath}'),`
+          ? `layout: () => require(${JSON.stringify(resolvedLayoutPath)}),`
           : ''
       }
       ${
         resolvedLoadingPath
-          ? `loading: () => require('${resolvedLoadingPath}'),`
+          ? `loading: () => require(${JSON.stringify(resolvedLoadingPath)}),`
           : ''
       }
     }]`
diff --git a/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts b/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts
index f168350122d8692..c2fdce03388f140 100644
--- a/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-client-entry-loader.ts
@@ -23,8 +23,10 @@ export default async function transformSource(this: any): Promise<string> {
       .filter((request) => (isServer ? !request.endsWith('.css') : true))
       .map((request) =>
         request.endsWith('.css')
-          ? `(() => import(/* webpackMode: "lazy" */ '${request}'))`
-          : `import(/* webpackMode: "eager" */ '${request}')`
+          ? `(() => import(/* webpackMode: "lazy" */ ${JSON.stringify(
+              request
+            )}))`
+          : `import(/* webpackMode: "eager" */ ${JSON.stringify(request)})`
       )
       .join(';\n') +
     `
diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index a06143433df13e5..f5274be13148ae4 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -39,7 +39,7 @@ export function buildExports(moduleExports: any, isESM: boolean) {
 export const clientComponentRegex = new RegExp(
   '(' +
     `\\.client(\\.(${defaultJsFileExtensions.join('|')}))?|` +
-    `next/(${nextClientComponents.join('|')})(\\.js)?|` +
+    `next[\\\\/](${nextClientComponents.join('|')})(\\.js)?|` +
     `\\.(${imageExtensions.join('|')})` +
     ')$'
 )
diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
index 0cf8f816557c373..2dcc2997f016960 100644
--- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -155,7 +155,8 @@ export class FlightManifestPlugin {
           mod.resourceResolveData?.path || resource
         )
         if (!ssrNamedModuleId.startsWith('.'))
-          ssrNamedModuleId = `./${ssrNamedModuleId}`
+          // TODO use getModuleId instead
+          ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}`
 
         if (isCSSModule) {
           if (!manifest[resource]) {
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index de362f9b5a5d037..ffb1e74d8b9a53b 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)
+                            relative(
+                              this.appDir!,
+                              entryData.absolutePagePath
+                            ).replace(/\\/g, '/')
                           ),
                           appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,