Add client router filter handling

packages/next/src/build/build-context.ts

@@ -4,6 +4,7 @@ import { Rewrite } from '../lib/load-custom-routes'
 import { __ApiPreviewProps } from '../server/api-utils'
 import { NextConfigComplete } from '../server/config-shared'
 import { Span } from '../trace'
+import type getBaseWebpackConfig from './webpack-config'
 import { TelemetryPlugin } from './webpack/plugins/telemetry-plugin'
 
 // a global object to store context for the current build
@@ -48,4 +49,7 @@ export const NextBuildContext: Partial<{
   reactProductionProfiling: boolean
   noMangling: boolean
   appDirOnly: boolean
+  clientRouterFilters: Parameters<
+    typeof getBaseWebpackConfig
+  >[1]['clientRouterFilters']
 }> = {}

packages/next/src/build/index.ts

@@ -131,6 +131,7 @@ import { webpackBuild } from './webpack-build'
 import { NextBuildContext } from './build-context'
 import { normalizePathSep } from '../shared/lib/page-path/normalize-path-sep'
 import { isAppRouteRoute } from '../lib/is-app-route-route'
+import { createClientRouterFilter } from '../lib/create-router-client-filter'
 
 export type SsgRoute = {
   initialRevalidateSeconds: number | false
@@ -840,6 +841,18 @@ export default async function build(
         ...rewrites.fallback,
       ]
 
+      if (config.experimental.clientRouterFilter) {
+        const nonInternalRedirects = redirects.filter(
+          (redir) => !(redir as any).internal
+        )
+        const clientRouterFilters = createClientRouterFilter(
+          appPageKeys,
+          nonInternalRedirects
+        )
+
+        NextBuildContext.clientRouterFilters = clientRouterFilters
+      }
+
       const distDirCreated = await nextBuildSpan
         .traceChild('create-dist-dir')
         .traceAsyncFn(async () => {

packages/next/src/build/webpack-build.ts

@@ -93,6 +93,7 @@ async function webpackBuildImpl(): Promise<{
     rewrites: NextBuildContext.rewrites!,
     reactProductionProfiling: NextBuildContext.reactProductionProfiling!,
     noMangling: NextBuildContext.noMangling!,
+    clientRouterFilters: NextBuildContext.clientRouterFilters!,
   }
 
   const configs = await runWebpackSpan

packages/next/src/build/webpack-config.ts

@@ -172,6 +172,7 @@ export function getDefineEnv({
   isNodeServer,
   isEdgeServer,
   middlewareMatchers,
+  clientRouterFilters,
 }: {
   dev?: boolean
   distDir: string
@@ -181,6 +182,9 @@ export function getDefineEnv({
   isEdgeServer?: boolean
   middlewareMatchers?: MiddlewareMatcher[]
   config: NextConfigComplete
+  clientRouterFilters: Parameters<
+    typeof getBaseWebpackConfig
+  >[1]['clientRouterFilters']
 }) {
   return {
     // internal field to identify the plugin config
@@ -229,6 +233,15 @@ export function getDefineEnv({
     'process.env.__NEXT_NEW_LINK_BEHAVIOR': JSON.stringify(
       config.experimental.newNextLinkBehavior
     ),
+    'process.env.__NEXT_CLIENT_ROUTER_FILTER_ENABLED': JSON.stringify(
+      config.experimental.clientRouterFilter
+    ),
+    'process.env.__NEXT_CLIENT_ROUTER_S_FILTER': JSON.stringify(
+      clientRouterFilters?.staticFilter
+    ),
+    'process.env.__NEXT_CLIENT_ROUTER_D_FILTER': JSON.stringify(
+      clientRouterFilters?.dynamicFilter
+    ),
     'process.env.__NEXT_OPTIMISTIC_CLIENT_CACHE': JSON.stringify(
       config.experimental.optimisticClientCache
     ),
@@ -610,6 +623,7 @@ export default async function getBaseWebpackConfig(
     jsConfig,
     resolvedBaseUrl,
     supportedBrowsers,
+    clientRouterFilters,
   }: {
     buildId: string
     config: NextConfigComplete
@@ -628,6 +642,14 @@ export default async function getBaseWebpackConfig(
     jsConfig: any
     resolvedBaseUrl: string | undefined
     supportedBrowsers: string[] | undefined
+    clientRouterFilters?: {
+      staticFilter: ReturnType<
+        import('../shared/lib/bloom-filter').BloomFilter['export']
+      >
+      dynamicFilter: ReturnType<
+        import('../shared/lib/bloom-filter').BloomFilter['export']
+      >
+    }
   }
 ): Promise<webpack.Configuration> {
   const isClient = compilerType === COMPILER_NAMES.client
@@ -2061,6 +2083,7 @@ export default async function getBaseWebpackConfig(
           isNodeServer,
           isEdgeServer,
           middlewareMatchers,
+          clientRouterFilters,
         })
       ),
       isClient &&

packages/next/src/lib/create-router-client-filter.ts

@@ -0,0 +1,71 @@
+import { BloomFilter } from '../shared/lib/bloom-filter'
+import { isDynamicRoute } from '../shared/lib/router/utils'
+import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
+import { Redirect } from './load-custom-routes'
+
+const POTENTIAL_ERROR_RATE = 0.02
+
+export function createClientRouterFilter(
+  paths: string[],
+  redirects: Redirect[]
+): {
+  staticFilter: ReturnType<BloomFilter['export']>
+  dynamicFilter: ReturnType<BloomFilter['export']>
+} {
+  const staticPaths = new Set<string>()
+  const dynamicPaths = new Set<string>()
+
+  for (const path of paths) {
+    if (isDynamicRoute(path)) {
+      let subPath = ''
+      const pathParts = path.split('/')
+
+      for (let i = 1; i < pathParts.length + 1; i++) {
+        const curPart = pathParts[i]
+
+        if (curPart.startsWith('[')) {
+          break
+        }
+        subPath = `${subPath}/${curPart}`
+      }
+      dynamicPaths.add(subPath)
+    } else {
+      staticPaths.add(path)
+    }
+  }
+
+  for (const redirect of redirects) {
+    const { source } = redirect
+    const path = removeTrailingSlash(source)
+
+    if (path.includes(':') || path.includes('(')) {
+      let subPath = ''
+      const pathParts = path.split('/')
+
+      for (let i = 1; i < pathParts.length + 1; i++) {
+        const curPart = pathParts[i]
+
+        if (curPart.includes(':') || curPart.includes('(')) {
+          break
+        }
+        subPath = `${subPath}/${curPart}`
+      }
+
+      dynamicPaths.add(subPath)
+    } else {
+      staticPaths.add(path)
+    }
+  }
+
+  const staticFilter = BloomFilter.from([...staticPaths], POTENTIAL_ERROR_RATE)
+
+  const dynamicFilter = BloomFilter.from(
+    [...dynamicPaths],
+    POTENTIAL_ERROR_RATE
+  )
+  const data = {
+    staticFilter: staticFilter.export(),
+    dynamicFilter: dynamicFilter.export(),
+  }
+  return data
+}

packages/next/src/server/config-schema.ts

@@ -247,6 +247,9 @@ const configSchema = {
           },
           type: 'object',
         },
+        clientRouterFilter: {
+          type: 'boolean',
+        },
         cpus: {
           type: 'number',
         },

packages/next/src/server/config-shared.ts

@@ -113,6 +113,7 @@ export interface NextJsWebpackConfig {
 }
 
 export interface ExperimentalConfig {
+  clientRouterFilter?: boolean
   externalMiddlewareRewritesResolve?: boolean
   extensionAlias?: Record<string, any>
   allowedRevalidateHeaderKeys?: string[]
@@ -619,6 +620,7 @@ export const defaultConfig: NextConfig = {
   output: !!process.env.NEXT_PRIVATE_STANDALONE ? 'standalone' : undefined,
   modularizeImports: undefined,
   experimental: {
+    clientRouterFilter: false,
     preCompiledNextServer: false,
     fetchCache: false,
     middlewarePrefetch: 'flexible',

packages/next/src/server/config.ts

@@ -167,14 +167,20 @@ function assignDefaults(
             value
           ) as (keyof ExperimentalConfig)[]) {
             const featureValue = value[featureName]
-            if (
-              featureName === 'appDir' &&
-              featureValue === true &&
-              !isAboveNodejs16
-            ) {
-              throw new Error(
-                `experimental.appDir requires Node v${NODE_16_VERSION} or later.`
-              )
+            if (featureName === 'appDir' && featureValue === true) {
+              if (!isAboveNodejs16) {
+                throw new Error(
+                  `experimental.appDir requires Node v${NODE_16_VERSION} or later.`
+                )
+              }
+              // auto enable clientRouterFilter if not manually set
+              // when appDir is enabled
+              if (
+                typeof userConfig.experimental.clientRouterFilter ===
+                'undefined'
+              ) {
+                userConfig.experimental.clientRouterFilter = true
+              }
             }
             if (
               value[featureName] !== defaultConfig.experimental[featureName]

packages/next/src/server/dev/next-dev-server.ts

@@ -96,6 +96,7 @@ import { CachedFileReader } from '../future/route-matcher-providers/dev/helpers/
 import { DefaultFileReader } from '../future/route-matcher-providers/dev/helpers/file-reader/default-file-reader'
 import { NextBuildContext } from '../../build/build-context'
 import { logAppDirError } from './log-app-dir-error'
+import { createClientRouterFilter } from '../../lib/create-router-client-filter'
 
 // Load ReactDevOverlay only when needed
 let ReactDevOverlayImpl: FunctionComponent
@@ -411,6 +412,7 @@ export default class DevServer extends Server {
       wp.watch({ directories: [this.dir], startTime: 0 })
       const fileWatchTimes = new Map()
       let enabledTypeScript = this.usingTypeScript
+      let previousClientRouterFilters: any
 
       wp.on('aggregated', async () => {
         let middlewareMatchers: MiddlewareMatcher[] | undefined
@@ -578,6 +580,23 @@ export default class DevServer extends Server {
             Log.error(`  "${pagesPath}" - "${appPath}"`)
           }
         }
+        let clientRouterFilters: any
+
+        if (this.nextConfig.experimental.clientRouterFilter) {
+          clientRouterFilters = createClientRouterFilter(
+            Object.keys(appPaths),
+            this.customRoutes.redirects.filter((r) => !(r as any).internal)
+          )
+
+          if (
+            !previousClientRouterFilters ||
+            JSON.stringify(previousClientRouterFilters) !==
+              JSON.stringify(clientRouterFilters)
+          ) {
+            envChange = true
+            previousClientRouterFilters = clientRouterFilters
+          }
+        }
 
         if (!this.usingTypeScript && enabledTypeScript) {
           // we tolerate the error here as this is best effort
@@ -664,6 +683,7 @@ export default class DevServer extends Server {
                     hasRewrites,
                     isNodeServer,
                     isEdgeServer,
+                    clientRouterFilters,
                   })
 
                   Object.keys(plugin.definitions).forEach((key) => {