Allow configuring global 404 precedence in hybrid App/Pages Router applications

[karukade]

Goals

1. Allow hybrid App Router / Pages Router applications to explicitly choose pages/404.tsx as the global 404 page.
2. Make it possible to migrate routes to the App Router independently from migrating the existing 404 page.

Non-Goals

1. Change the current App Router-first 404 behavior by default.
2. Change how notFound() or nested not-found.tsx boundaries work within App Router routes.
3. Change the behavior of applications that use only the App Router or only the Pages Router.

Background

Currently, when an application contains actual App Router routes, the App Router /_not-found takes precedence over Pages Router /404.

If app/not-found.tsx does not exist, Next.js uses its built-in Not Found page instead of an existing pages/404.tsx.

This is problematic during an incremental migration from the Pages Router to the App Router. Adding even a small number of App Router routes can cause the existing pages/404.tsx to stop being used globally.

As a result, the 404 UI must also be migrated to app/not-found.tsx or shared between both routers, even when that work is unrelated to the routes currently being migrated. This can require additional work when the existing 404 page depends on Pages Router-specific layouts, providers, CSS, or other infrastructure.

The current App Router-first precedence is understood. This request is specifically about providing an opt-in migration path rather than changing the existing default behavior.

Proposal

Add an option to explicitly choose the global 404 behavior when the App Router and Pages Router coexist.

For example:

const nextConfig = {
  // Naming is only an example
  notFoundPreference: 'pages',
}

or:

const nextConfig = {
  experimental: {
    preferPagesRouter404: true,
  },
}

When enabled, pages/404.tsx would be used as the global 404 page even when App Router routes exist.