Fix custom app file regex

packages/next/build/webpack-config.ts

@@ -7,6 +7,7 @@ import semver from 'next/dist/compiled/semver'
 import { isWebpack5, webpack } from 'next/dist/compiled/webpack/webpack'
 import type webpack5 from 'webpack5'
 import path, { join as pathJoin, relative as relativePath } from 'path'
+import escapeRegExp from 'next/dist/compiled/escape-string-regexp'
 import {
   DOT_NEXT_ALIAS,
   NEXT_PROJECT_ROOT,
@@ -1562,7 +1563,7 @@ export default async function getBaseWebpackConfig(
   webpackConfig = await buildConfiguration(webpackConfig, {
     rootDirectory: dir,
     customAppFile: new RegExp(
-      path.join(pagesDir, `_app`).replace(/\\/g, '(/|\\\\)')
+      escapeRegExp(path.join(pagesDir, `_app`).replace(/\\/g, '(/|\\\\)'))
     ),
     isDevelopment: dev,
     isServer,

test/integration/css-fixtures/single-global-special-characters/a+b/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-fixtures/single-global-special-characters/a+b/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/css-fixtures/single-global-special-characters/a+b/styles/global.css

@@ -0,0 +1,3 @@
+.red-text {
+  color: red;
+}

test/integration/css/test/index.test.js

@@ -47,6 +47,34 @@ describe('CSS Support', () => {
     })
   })
 
+  describe('Basic Global Support with special characters in path', () => {
+    const appDir = join(fixturesDir, 'single-global-special-characters', 'a+b')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+
   describe('Basic Global Support with src/ dir', () => {
     const appDir = join(fixturesDir, 'single-global-src')