diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index a5000649f4b73..dd6cb13134617 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -8,7 +8,7 @@ export const FILE_TYPES = {
   template: 'template',
   error: 'error',
   loading: 'loading',
-  '404': '404',
+  'not-found': 'not-found',
 } as const
 
 // TODO-APP: check if this can be narrowed.
@@ -92,7 +92,7 @@ async function createTreeCodeFromPath({
                 file === FILE_TYPES.layout
                   ? `layoutOrPagePath: '${filePath}',`
                   : ''
-              }${file}: () => require(${JSON.stringify(filePath)}),`
+              }'${file}': () => require(${JSON.stringify(filePath)}),`
             })
             .join('\n')}
         }
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
index 6b1f8d9572ff3..538ec71a2e639 100644
--- a/packages/next/server/app-render.tsx
+++ b/packages/next/server/app-render.tsx
@@ -822,7 +822,7 @@ export async function renderToHTMLOrFlight(
           error,
           loading,
           page,
-          '404': notFound,
+          'not-found': notFound,
         },
       ],
       parentParams,
diff --git a/test/e2e/app-dir/app/app/not-found/404.js b/test/e2e/app-dir/app/app/not-found/404.js
deleted file mode 100644
index 42acdf4c589be..0000000000000
--- a/test/e2e/app-dir/app/app/not-found/404.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function NotFound() {
-  return <h1 id="not-found-component">404!</h1>
-}
diff --git a/test/e2e/app-dir/app/app/not-found/not-found.js b/test/e2e/app-dir/app/app/not-found/not-found.js
new file mode 100644
index 0000000000000..a022a980b3384
--- /dev/null
+++ b/test/e2e/app-dir/app/app/not-found/not-found.js
@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <h1 id="not-found-component">Not Found!</h1>
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 02752cc8531f6..ce4969f8d2f61 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1475,31 +1475,34 @@ describe('app dir', () => {
       })
     })
 
-    describe('404', () => {
-      it.skip('should trigger 404 in a server component', async () => {
+    describe('not-found', () => {
+      it.skip('should trigger not-found in a server component', async () => {
         const browser = await webdriver(next.url, '/not-found/servercomponent')
 
         expect(
           await browser.waitForElementByCss('#not-found-component').text()
-        ).toBe('404!')
+        ).toBe('Not Found!')
       })
 
-      it.skip('should trigger 404 in a client component', async () => {
+      it.skip('should trigger not-found in a client component', async () => {
         const browser = await webdriver(next.url, '/not-found/clientcomponent')
         expect(
           await browser.waitForElementByCss('#not-found-component').text()
-        ).toBe('404!')
-      })
-      ;(isDev ? it.skip : it)('should trigger 404 client-side', async () => {
-        const browser = await webdriver(next.url, '/not-found/client-side')
-        await browser
-          .elementByCss('button')
-          .click()
-          .waitForElementByCss('#not-found-component')
-        expect(await browser.elementByCss('#not-found-component').text()).toBe(
-          '404!'
-        )
+        ).toBe('Not Found!')
       })
+      ;(isDev ? it.skip : it)(
+        'should trigger not-found client-side',
+        async () => {
+          const browser = await webdriver(next.url, '/not-found/client-side')
+          await browser
+            .elementByCss('button')
+            .click()
+            .waitForElementByCss('#not-found-component')
+          expect(
+            await browser.elementByCss('#not-found-component').text()
+          ).toBe('Not Found!')
+        }
+      )
     })
 
     describe('redirect', () => {