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)

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')}
         }

packages/next/server/app-render.tsx

@@ -822,7 +822,7 @@ export async function renderToHTMLOrFlight(
           error,
           loading,
           page,
-          '404': notFound,
+          'not-found': notFound,
         },
       ],
       parentParams,

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>
+}

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