Default app router not found

packages/next/src/build/analysis/get-page-static-info.ts

@@ -281,14 +281,21 @@ function checkExports(
   }
 }
 
-async function tryToReadFile(filePath: string, shouldThrow: boolean) {
+async function tryToReadFile(
+  filePath: string,
+  opts: { shouldThrow: boolean; shouldLog: boolean }
+) {
   try {
     return await fs.readFile(filePath, {
       encoding: 'utf8',
     })
-  } catch (error) {
-    if (shouldThrow) {
+  } catch (error: any) {
+    if (opts.shouldThrow) {
+      error.message = `Next.js ERROR: Failed to read file ${filePath}:\n${error.message}`
       throw error
+    } else if (opts.shouldLog) {
+      console.error(error)
+      return undefined
     }
   }
 }
@@ -453,7 +460,11 @@ function warnAboutUnsupportedValue(
 export async function isDynamicMetadataRoute(
   pageFilePath: string
 ): Promise<boolean> {
-  const fileContent = (await tryToReadFile(pageFilePath, true)) || ''
+  const fileContent =
+    (await tryToReadFile(pageFilePath, {
+      shouldThrow: true,
+      shouldLog: false,
+    })) || ''
   if (!/generateImageMetadata|generateSitemaps/.test(fileContent)) return false
 
   const swcAST = await parseModule(pageFilePath, fileContent)
@@ -478,7 +489,11 @@ export async function getPageStaticInfo(params: {
 }): Promise<PageStaticInfo> {
   const { isDev, pageFilePath, nextConfig, page, pageType } = params
 
-  const fileContent = (await tryToReadFile(pageFilePath, !isDev)) || ''
+  const fileContent =
+    (await tryToReadFile(pageFilePath, {
+      shouldThrow: !isDev,
+      shouldLog: !isDev,
+    })) || ''
   if (
     /runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const/.test(
       fileContent

packages/next/src/build/entries.ts

@@ -264,7 +264,17 @@ export function createPagesMapping({
     {}
   )
 
-  if (pagesType !== 'pages') {
+  if (pagesType === 'app') {
+    const hasAppPages = Object.keys(pages).some((page) =>
+      page.endsWith('/page')
+    )
+    return {
+      ...(hasAppPages && {
+        '/_not-found': 'next/dist/client/components/not-found-error',
+      }),
+      ...pages,
+    }
+  } else if (pagesType === 'root') {
     return pages
   }
 

packages/next/src/build/index.ts

@@ -109,6 +109,7 @@ import {
   copyTracedFiles,
   isReservedPage,
   AppConfig,
+  isAppBuiltinNotFoundPage,
 } from './utils'
 import { writeBuildId } from './write-build-id'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
@@ -1492,16 +1493,17 @@ export default async function build(
                   }
                 }
 
-                const staticInfo = pagePath
-                  ? await getPageStaticInfo({
-                      pageFilePath: path.join(
-                        (pageType === 'pages' ? pagesDir : appDir) || '',
-                        pagePath
-                      ),
-                      nextConfig: config,
-                      pageType,
-                    })
-                  : undefined
+                const staticInfo =
+                  pagePath && !isAppBuiltinNotFoundPage(pagePath)
+                    ? await getPageStaticInfo({
+                        pageFilePath: path.join(
+                          (pageType === 'pages' ? pagesDir : appDir) || '',
+                          pagePath
+                        ),
+                        nextConfig: config,
+                        pageType,
+                      })
+                    : undefined
 
                 if (staticInfo?.extraConfig) {
                   functionsConfigManifest[page] = staticInfo.extraConfig
@@ -2843,7 +2845,6 @@ export default async function build(
 
           // If there's /not-found inside app, we prefer it over the pages 404
           if (hasStaticApp404) {
-            // await moveExportedPage('/_error', '/404', '/404', false, 'html')
             await moveExportedAppNotFoundTo404()
           } else {
             // Only move /404 to /404 when there is no custom 404 as in that case we don't know about the 404 page

packages/next/src/build/utils.ts

@@ -1999,6 +1999,12 @@ export function isReservedPage(page: string) {
   return RESERVED_PAGE.test(page)
 }
 
+export function isAppBuiltinNotFoundPage(page: string) {
+  return /next[\\/]dist[\\/]client[\\/]components[\\/]not-found-error/.test(
+    page
+  )
+}
+
 export function isCustomErrorPage(page: string) {
   return page === '/404' || page === '/500'
 }

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -54,6 +54,8 @@ const PAGE_SEGMENT = 'page$'
 const PARALLEL_CHILDREN_SEGMENT = 'children$'
 
 const defaultNotFoundPath = 'next/dist/client/components/not-found-error'
+const defaultNotFoundPathRegex =
+  /next[\\/]dist[\\/]client[\\/]components[\\/]not-found-error/
 
 type DirResolver = (pathToResolve: string) => string
 type PathResolver = (
@@ -180,10 +182,10 @@ async function createTreeCodeFromPath(
   rootLayout: string | undefined
   globalError: string | undefined
 }> {
-  const splittedPath = pagePath.split(/[\\/]/)
-  const appDirPrefix = splittedPath[0]
-  const pages: string[] = []
+  const appDirPrefix = APP_DIR_ALIAS
   const isNotFoundRoute = page === '/_not-found'
+  const isDefaultNotFound = defaultNotFoundPathRegex.test(pagePath)
+  const pages: string[] = []
 
   let rootLayout: string | undefined
   let globalError: string | undefined
@@ -244,7 +246,10 @@ async function createTreeCodeFromPath(
     let metadata: Awaited<ReturnType<typeof createStaticMetadataFromRoute>> =
       null
     const routerDirPath = `${appDirPrefix}${segmentPath}`
-    const resolvedRouteDir = await resolveDir(routerDirPath)
+    // For default not-found, don't traverse the directory to find metadata.
+    const resolvedRouteDir = isDefaultNotFound
+      ? ''
+      : await resolveDir(routerDirPath)
 
     if (resolvedRouteDir) {
       metadata = await createStaticMetadataFromRoute(resolvedRouteDir, {

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -367,7 +367,9 @@ export class ClientReferenceManifestPlugin {
       }
 
       // Special case for the root not-found page.
-      if (/^app\/not-found(\.[^.]+)?$/.test(entryName)) {
+      // dev: app/not-found
+      // prod: app/_not-found
+      if (/^app\/_?not-found(\.[^.]+)?$/.test(entryName)) {
         manifestEntryFiles.push('app/not-found')
       }
 

packages/next/src/lib/verifyRootLayout.ts

@@ -41,7 +41,7 @@ export default function RootLayout({
   title: 'Next.js',
   description: 'Generated by Next.js',
 }
- 
+
 export default function RootLayout({ children }) {
  return (
     <html lang="en">
@@ -71,35 +71,42 @@ export async function verifyRootLayout({
       appDir,
       `**/layout.{${pageExtensions.join(',')}}`
     )
+    const isFileUnderAppDir = pagePath.startsWith(`${APP_DIR_ALIAS}/`)
     const normalizedPagePath = pagePath.replace(`${APP_DIR_ALIAS}/`, '')
     const pagePathSegments = normalizedPagePath.split('/')
 
     // Find an available dir to place the layout file in, the layout file can't affect any other layout.
     // Place the layout as close to app/ as possible.
     let availableDir: string | undefined
 
-    if (layoutFiles.length === 0) {
-      // If there's no other layout file we can place the layout file in the app dir.
-      // However, if the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
-      // prefer creating the root layout in that route group.
-      const firstSegmentValue = pagePathSegments[0]
-      availableDir = firstSegmentValue.startsWith('(') ? firstSegmentValue : ''
-    } else {
-      pagePathSegments.pop() // remove the page from segments
+    if (isFileUnderAppDir) {
+      if (layoutFiles.length === 0) {
+        // If there's no other layout file we can place the layout file in the app dir.
+        // However, if the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
+        // prefer creating the root layout in that route group.
+        const firstSegmentValue = pagePathSegments[0]
+        availableDir = firstSegmentValue.startsWith('(')
+          ? firstSegmentValue
+          : ''
+      } else {
+        pagePathSegments.pop() // remove the page from segments
 
-      let currentSegments: string[] = []
-      for (const segment of pagePathSegments) {
-        currentSegments.push(segment)
-        // Find the dir closest to app/ where a layout can be created without affecting other layouts.
-        if (
-          !layoutFiles.some((file) =>
-            file.startsWith(currentSegments.join('/'))
-          )
-        ) {
-          availableDir = currentSegments.join('/')
-          break
+        let currentSegments: string[] = []
+        for (const segment of pagePathSegments) {
+          currentSegments.push(segment)
+          // Find the dir closest to app/ where a layout can be created without affecting other layouts.
+          if (
+            !layoutFiles.some((file) =>
+              file.startsWith(currentSegments.join('/'))
+            )
+          ) {
+            availableDir = currentSegments.join('/')
+            break
+          }
         }
       }
+    } else {
+      availableDir = ''
     }
 
     if (typeof availableDir === 'string') {

packages/next/src/server/app-render/app-render.tsx

@@ -28,7 +28,6 @@ import {
   streamToBufferedResult,
   cloneTransformStream,
 } from '../stream-utils/node-web-streams-helper'
-import DefaultNotFound from '../../client/components/not-found-error'
 import {
   canSegmentBeOverridden,
   matchSegment,
@@ -734,7 +733,7 @@ export async function renderToHTMLOrFlight(
         const NotFoundBoundary =
           ComponentMod.NotFoundBoundary as typeof import('../../client/components/not-found-boundary').NotFoundBoundary
         Component = (componentProps: any) => {
-          const NotFoundComponent = NotFound || DefaultNotFound
+          const NotFoundComponent = NotFound
           const RootLayoutComponent = LayoutOrPage
           return (
             <NotFoundBoundary

packages/next/src/server/dev/on-demand-entry-handler.ts

@@ -456,6 +456,16 @@ async function findPagePathData(
     }
   }
 
+  if (page === '/not-found' && appDir) {
+    return {
+      absolutePagePath: require.resolve(
+        'next/dist/client/components/not-found-error'
+      ),
+      bundlePath: 'app/not-found',
+      page: '/not-found',
+    }
+  }
+
   if (page === '/_error') {
     return {
       absolutePagePath: require.resolve('next/dist/pages/_error'),

packages/next/src/server/lib/find-page-file.ts

@@ -91,7 +91,7 @@ export function createValidFileMatcher(
       pageExtensions
     )}$`
   )
-  const leafOnlyNotFoundFileRegex = new RegExp(
+  const rootNotFoundFileRegex = new RegExp(
     `^not-found\\.${getExtensionRegexString(pageExtensions)}$`
   )
   /** TODO-METADATA: support other metadata routes
@@ -136,7 +136,7 @@ export function createValidFileMatcher(
       return false
     }
     const rest = filePath.slice(appDirPath.length + 1)
-    return leafOnlyNotFoundFileRegex.test(rest)
+    return rootNotFoundFileRegex.test(rest)
   }
 
   return {

packages/next/src/server/lib/router-server.ts

@@ -684,7 +684,7 @@ export async function initialize(opts: {
           parsedUrl,
           'app',
           handleIndex,
-          '/_not-found',
+          opts.dev ? '/not-found' : '/_not-found',
           {
             'x-invoke-status': '404',
           }

packages/next/src/server/lib/router-utils/setup-dev.ts

@@ -946,9 +946,9 @@ async function startWatcher(opts: SetupOpts) {
 
         if (isAppPath) {
           const isRootNotFound = validFileMatcher.isRootNotFound(fileName)
+          hasRootAppNotFound = true
 
           if (isRootNotFound) {
-            hasRootAppNotFound = true
             continue
           }
           if (!isRootNotFound && !validFileMatcher.isAppRouterPage(fileName)) {

test/e2e/app-dir/app-static/app-static.test.ts

@@ -484,6 +484,10 @@ createNextDescribe(
           })
 
         expect(files).toEqual([
+          '_not-found_client-reference-manifest.js',
+          '_not-found.html',
+          '_not-found.js',
+          '_not-found.rsc',
           '(new)/custom/page_client-reference-manifest.js',
           '(new)/custom/page.js',
           'api/draft-mode/route.js',
@@ -565,6 +569,7 @@ createNextDescribe(
           'hooks/use-search-params/with-suspense/page.js',
           'index.html',
           'index.rsc',
+          'not-found_client-reference-manifest.js',
           'page_client-reference-manifest.js',
           'page.js',
           'partial-gen-params-no-additional-lang/[lang]/[slug]/page_client-reference-manifest.js',

test/e2e/app-dir/create-root-layout/create-root-layout.test.ts

@@ -54,7 +54,7 @@ describe('app-dir create root layout', () => {
               title: 'Next.js',
               description: 'Generated by Next.js',
             }
-             
+
             export default function RootLayout({ children }) {
              return (
                 <html lang=\\"en\\">
@@ -106,7 +106,7 @@ describe('app-dir create root layout', () => {
               title: 'Next.js',
               description: 'Generated by Next.js',
             }
-             
+
             export default function RootLayout({ children }) {
              return (
                 <html lang=\\"en\\">
@@ -158,7 +158,7 @@ describe('app-dir create root layout', () => {
               title: 'Next.js',
               description: 'Generated by Next.js',
             }
-             
+
             export default function RootLayout({ children }) {
              return (
                 <html lang=\\"en\\">

test/e2e/app-dir/not-found-default/app/layout.js

@@ -5,7 +5,6 @@ import { notFound } from 'next/navigation'
 import NotFoundTrigger from './not-found-trigger'
 
 export default function Root({ children }) {
-  // notFound()
   const [clicked, setClicked] = useState(false)
   if (clicked) {
     notFound()

test/e2e/app-dir/not-found-default/index.test.ts

@@ -31,6 +31,15 @@ createNextDescribe(
       }
     })
 
+    it('should render default 404 with root layout for non-existent page', async () => {
+      const browser = await next.browser('/non-existent')
+      await browser.waitForElementByCss('.next-error-h1')
+      expect(await browser.elementByCss('.next-error-h1').text()).toBe('404')
+      expect(await browser.elementByCss('html').getAttribute('class')).toBe(
+        'root-layout-html'
+      )
+    })
+
     it('should error on server notFound from root layout on server-side', async () => {
       const browser = await next.browser('/?root-not-found=1')