Revert "Refine the not-found rendering process for app router"

packages/next/src/client/components/app-router.tsx

@@ -54,6 +54,7 @@ import { isBot } from '../../shared/lib/router/utils/is-bot'
 import { addBasePath } from '../add-base-path'
 import { AppRouterAnnouncer } from './app-router-announcer'
 import { RedirectBoundary } from './redirect-boundary'
+import { NotFoundBoundary } from './not-found-boundary'
 import { findHeadInCache } from './router-reducer/reducers/find-head-in-cache'
 import { createInfinitePromise } from './infinite-promise'
 import { NEXT_RSC_UNION_QUERY } from './app-router-headers'
@@ -88,13 +89,24 @@ export function urlToUrlWithoutFlightMarker(url: string): URL {
   return urlWithoutFlightParameters
 }
 
+const HotReloader:
+  | typeof import('./react-dev-overlay/hot-reloader-client').default
+  | null =
+  process.env.NODE_ENV === 'production'
+    ? null
+    : (require('./react-dev-overlay/hot-reloader-client')
+        .default as typeof import('./react-dev-overlay/hot-reloader-client').default)
+
 type AppRouterProps = Omit<
   Omit<InitialRouterStateParameters, 'isServer' | 'location'>,
   'initialParallelRoutes'
 > & {
   buildId: string
   initialHead: ReactNode
   assetPrefix: string
+  // Top level boundaries props
+  notFound: React.ReactNode | undefined
+  asNotFound?: boolean
 }
 
 function isExternalURL(url: URL) {
@@ -212,6 +224,8 @@ function Router({
   initialCanonicalUrl,
   children,
   assetPrefix,
+  notFound,
+  asNotFound,
 }: AppRouterProps) {
   const initialState = useMemo(
     () =>
@@ -431,26 +445,16 @@ function Router({
     return findHeadInCache(cache, tree[1])
   }, [cache, tree])
 
-  let content = (
+  const notFoundProps = { notFound, asNotFound }
+
+  const content = (
     <RedirectBoundary>
       {head}
       {cache.subTreeData}
       <AppRouterAnnouncer tree={tree} />
     </RedirectBoundary>
   )
 
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof window !== 'undefined') {
-      const DevRootNotFoundBoundary: typeof import('./dev-root-not-found-boundary').DevRootNotFoundBoundary =
-        require('./dev-root-not-found-boundary').DevRootNotFoundBoundary
-      content = <DevRootNotFoundBoundary>{content}</DevRootNotFoundBoundary>
-    }
-    const HotReloader: typeof import('./react-dev-overlay/hot-reloader-client').default =
-      require('./react-dev-overlay/hot-reloader-client').default
-
-    content = <HotReloader assetPrefix={assetPrefix}>{content}</HotReloader>
-  }
-
   return (
     <>
       <HistoryUpdater
@@ -480,7 +484,16 @@ function Router({
                   url: canonicalUrl,
                 }}
               >
-                {content}
+                {HotReloader ? (
+                  // HotReloader implements a separate NotFoundBoundary to maintain the HMR ping interval
+                  <HotReloader assetPrefix={assetPrefix} {...notFoundProps}>
+                    {content}
+                  </HotReloader>
+                ) : (
+                  <NotFoundBoundary {...notFoundProps}>
+                    {content}
+                  </NotFoundBoundary>
+                )}
               </LayoutRouterContext.Provider>
             </AppRouterContext.Provider>
           </GlobalLayoutRouterContext.Provider>

packages/next/src/client/components/layout-router.tsx

@@ -491,6 +491,7 @@ export default function OuterLayoutRouter({
   template,
   notFound,
   notFoundStyles,
+  asNotFound,
   styles,
 }: {
   parallelRouterKey: string
@@ -505,6 +506,7 @@ export default function OuterLayoutRouter({
   hasLoading: boolean
   notFound: React.ReactNode | undefined
   notFoundStyles: React.ReactNode | undefined
+  asNotFound?: boolean
   styles?: React.ReactNode
 }) {
   const context = useContext(LayoutRouterContext)
@@ -572,6 +574,7 @@ export default function OuterLayoutRouter({
                     <NotFoundBoundary
                       notFound={notFound}
                       notFoundStyles={notFoundStyles}
+                      asNotFound={asNotFound}
                     >
                       <RedirectBoundary>
                         <InnerLayoutRouter

packages/next/src/client/components/not-found-boundary.tsx

@@ -64,9 +64,6 @@ class NotFoundErrorBoundary extends React.Component<
       return (
         <>
           <meta name="robots" content="noindex" />
-          {process.env.NODE_ENV === 'development' && (
-            <meta name="next-error" content="not-found" />
-          )}
           {this.props.notFoundStyles}
           {this.props.notFound}
         </>

packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx

@@ -10,6 +10,7 @@ import stripAnsi from 'next/dist/compiled/strip-ansi'
 import formatWebpackMessages from '../../dev/error-overlay/format-webpack-messages'
 import { useRouter } from '../navigation'
 import {
+  ACTION_NOT_FOUND,
   ACTION_VERSION_INFO,
   INITIAL_OVERLAY_STATE,
   errorOverlayReducer,
@@ -35,13 +36,16 @@ import {
 } from './internal/helpers/use-websocket'
 import { parseComponentStack } from './internal/helpers/parse-component-stack'
 import type { VersionInfo } from '../../../server/dev/parse-version-info'
+import { isNotFoundError } from '../not-found'
+import { NotFoundBoundary } from '../not-found-boundary'
 
 interface Dispatcher {
   onBuildOk(): void
   onBuildError(message: string): void
   onVersionInfo(versionInfo: VersionInfo): void
   onBeforeRefresh(): void
   onRefresh(): void
+  onNotFound(): void
 }
 
 // TODO-APP: add actual type
@@ -50,6 +54,8 @@ type PongEvent = any
 let mostRecentCompilationHash: any = null
 let __nextDevClientId = Math.round(Math.random() * 100 + Date.now())
 
+// let startLatency = undefined
+
 function onBeforeFastRefresh(dispatcher: Dispatcher, hasUpdates: boolean) {
   if (hasUpdates) {
     dispatcher.onBeforeRefresh()
@@ -416,30 +422,18 @@ function processMessage(
         fetch(window.location.href, {
           credentials: 'same-origin',
         }).then((pageRes) => {
-          let shouldRefresh = pageRes.ok
-          // TODO-APP: investigate why edge runtime needs to reload
-          const isEdgeRuntime = pageRes.headers.get('x-edge-runtime') === '1'
-          if (pageRes.status === 404) {
-            // Check if head present as document.head could be null
+          if (pageRes.status === 200) {
+            // Page exists now, reload
+            startTransition(() => {
+              // @ts-ignore it exists, it's just hidden
+              router.fastRefresh()
+              dispatcher.onRefresh()
+            })
+          } else if (pageRes.status === 404) {
             // We are still on the page,
             // dispatch an error so it's caught by the NotFound handler
-            const devErrorMetaTag = document.head?.querySelector(
-              'meta[name="next-error"]'
-            )
-            shouldRefresh = !devErrorMetaTag
+            dispatcher.onNotFound()
           }
-          // Page exists now, reload
-          startTransition(() => {
-            if (shouldRefresh) {
-              if (isEdgeRuntime) {
-                window.location.reload()
-              } else {
-                // @ts-ignore it exists, it's just hidden
-                router.fastRefresh()
-                dispatcher.onRefresh()
-              }
-            }
-          })
         })
       }
       return
@@ -456,9 +450,15 @@ function processMessage(
 export default function HotReload({
   assetPrefix,
   children,
+  notFound,
+  notFoundStyles,
+  asNotFound,
 }: {
   assetPrefix: string
   children?: ReactNode
+  notFound?: React.ReactNode
+  notFoundStyles?: React.ReactNode
+  asNotFound?: boolean
 }) {
   const [state, dispatch] = useReducer(
     errorOverlayReducer,
@@ -481,6 +481,9 @@ export default function HotReload({
       onVersionInfo(versionInfo) {
         dispatch({ type: ACTION_VERSION_INFO, versionInfo })
       },
+      onNotFound() {
+        dispatch({ type: ACTION_NOT_FOUND })
+      },
     }
   }, [dispatch])
 
@@ -502,7 +505,9 @@ export default function HotReload({
       frames: parseStack(reason.stack!),
     })
   }, [])
-  const handleOnReactError = useCallback(() => {
+  const handleOnReactError = useCallback((error: Error) => {
+    // not found errors are handled by the parent boundary, not the dev overlay
+    if (isNotFoundError(error)) throw error
     RuntimeErrorHandler.hadRuntimeError = true
   }, [])
   useErrorHandler(handleOnUnhandledError, handleOnUnhandledRejection)
@@ -533,8 +538,15 @@ export default function HotReload({
   }, [sendMessage, router, webSocketRef, dispatcher])
 
   return (
-    <ReactDevOverlay onReactError={handleOnReactError} state={state}>
-      {children}
-    </ReactDevOverlay>
+    <NotFoundBoundary
+      key={`${state.notFound}`}
+      notFound={notFound}
+      notFoundStyles={notFoundStyles}
+      asNotFound={asNotFound}
+    >
+      <ReactDevOverlay onReactError={handleOnReactError} state={state}>
+        {children}
+      </ReactDevOverlay>
+    </NotFoundBoundary>
   )
 }

packages/next/src/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx

@@ -13,6 +13,7 @@ import { parseStack } from './helpers/parseStack'
 import { Base } from './styles/Base'
 import { ComponentStyles } from './styles/ComponentStyles'
 import { CssReset } from './styles/CssReset'
+import { notFound } from '../../not-found'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
@@ -58,6 +59,10 @@ class ReactDevOverlay extends React.PureComponent<
       reactError ||
       rootLayoutMissingTagsError
 
+    if (state.notFound) {
+      notFound()
+    }
+
     return (
       <>
         {reactError ? (

packages/next/src/client/components/react-dev-overlay/internal/error-overlay-reducer.ts

@@ -10,6 +10,7 @@ export const ACTION_REFRESH = 'fast-refresh'
 export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_VERSION_INFO = 'version-info'
+export const ACTION_NOT_FOUND = 'not-found'
 export const INITIAL_OVERLAY_STATE: OverlayState = {
   nextId: 1,
   buildError: null,
@@ -33,6 +34,10 @@ interface FastRefreshAction {
   type: typeof ACTION_REFRESH
 }
 
+interface NotFoundAction {
+  type: typeof ACTION_NOT_FOUND
+}
+
 export interface UnhandledErrorAction {
   type: typeof ACTION_UNHANDLED_ERROR
   reason: Error
@@ -91,25 +96,30 @@ export const errorOverlayReducer: React.Reducer<
     | BuildErrorAction
     | BeforeFastRefreshAction
     | FastRefreshAction
+    | NotFoundAction
     | UnhandledErrorAction
     | UnhandledRejectionAction
     | VersionInfoAction
   >
 > = (state, action) => {
   switch (action.type) {
     case ACTION_BUILD_OK: {
-      return { ...state, buildError: null }
+      return { ...state, buildError: null, notFound: false }
     }
     case ACTION_BUILD_ERROR: {
       return { ...state, buildError: action.message }
     }
     case ACTION_BEFORE_REFRESH: {
       return { ...state, refreshState: { type: 'pending', errors: [] } }
     }
+    case ACTION_NOT_FOUND: {
+      return { ...state, notFound: true }
+    }
     case ACTION_REFRESH: {
       return {
         ...state,
         buildError: null,
+        notFound: false,
         errors:
           // Errors can come in during updates. In this case, UNHANDLED_ERROR
           // and UNHANDLED_REJECTION events might be dispatched between the