From 833a67ff8cee3e14c84af11bf78b25085d643824 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 27 Sep 2022 15:50:21 +0200
Subject: [PATCH] Rename 404 -> not-found for new router (#40941)

As discussed with @sebmarkbage, the handling is more about showing a not found component than it is about a specific status code as these can come in late with streaming.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---
 .../build/webpack/loaders/next-app-loader.ts  |  4 +--
 packages/next/server/app-render.tsx           |  2 +-
 test/e2e/app-dir/app/app/not-found/404.js     |  3 --
 .../app-dir/app/app/not-found/not-found.js    |  3 ++
 test/e2e/app-dir/index.test.ts                | 33 ++++++++++---------
 5 files changed, 24 insertions(+), 21 deletions(-)
 delete mode 100644 test/e2e/app-dir/app/app/not-found/404.js
 create mode 100644 test/e2e/app-dir/app/app/not-found/not-found.js

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', () => {