wip: root params in route handlers

Author: lubieowoce

crates/next-core/src/next_app/app_route_entry.rs

@@ -84,7 +84,8 @@ pub async fn get_app_route_entry(
             "VAR_USERLAND" => INNER.into(),
         },
         fxindexmap! {
-            "nextConfigOutput" => output_type
+            "nextConfigOutput" => output_type,
+            // "rootParamNames" => ... // TODO(root-params)
         },
         fxindexmap! {},
     )

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

@@ -35,6 +35,7 @@ import {
 } from '../segment-config/middleware/middleware-config'
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
 import { normalizePagePath } from '../../shared/lib/page-path/normalize-page-path'
+import type { ParamInfo } from '../webpack/loaders/next-root-params-loader'
 
 const PARSE_PATTERN =
   /(?<!(_jsx|jsx-))runtime|preferredRegion|getStaticProps|getServerSideProps|generateStaticParams|export const|generateImageMetadata|generateSitemaps/
@@ -80,6 +81,7 @@ export interface AppPageStaticInfo {
   preferredRegion: AppSegmentConfig['preferredRegion'] | undefined
   maxDuration: number | undefined
   hadUnsupportedValue: boolean
+  rootParams: ParamInfo[] | undefined
 }
 
 export interface PagesPageStaticInfo {
@@ -490,6 +492,7 @@ export async function getAppPageStaticInfo({
       preferredRegion: undefined,
       maxDuration: undefined,
       hadUnsupportedValue: false,
+      rootParams: undefined,
     }
   }
 
@@ -556,6 +559,7 @@ export async function getAppPageStaticInfo({
     preferredRegion: config.preferredRegion,
     maxDuration: config.maxDuration,
     hadUnsupportedValue,
+    rootParams: undefined,
   }
 }
 

packages/next/src/build/entries.ts

@@ -5,6 +5,7 @@ import type { EdgeAppRouteLoaderQuery } from './webpack/loaders/next-edge-app-ro
 import type { NextConfigComplete } from '../server/config-shared'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import type {
+  AppPageStaticInfo,
   MiddlewareConfig,
   MiddlewareMatcher,
   PageStaticInfo,
@@ -76,6 +77,7 @@ import type { PageExtensions } from './page-extensions-type'
 import type { MappedPages } from './build-context'
 import { PAGE_TYPES } from '../lib/page-types'
 import { isAppPageRoute } from '../lib/is-app-page-route'
+import { getParamsFromLayoutFilePath } from './webpack/loaders/next-root-params-loader'
 
 export function sortByPageExts(pageExtensions: PageExtensions) {
   return (a: string, b: string) => {
@@ -133,25 +135,26 @@ export async function getStaticInfoIncludingLayouts({
 
   const segments = [pageStaticInfo]
 
-  // inherit from layout files only if it's a page route
-  if (isAppPageRoute(page)) {
-    const layoutFiles = []
-    const potentialLayoutFiles = pageExtensions.map((ext) => 'layout.' + ext)
-    let dir = dirname(pageFilePath)
-
-    // Uses startsWith to not include directories further up.
-    while (dir.startsWith(appDir)) {
-      for (const potentialLayoutFile of potentialLayoutFiles) {
-        const layoutFile = join(dir, potentialLayoutFile)
-        if (!fs.existsSync(layoutFile)) {
-          continue
-        }
-        layoutFiles.push(layoutFile)
+  const layoutFiles: string[] = []
+  const potentialLayoutFiles = pageExtensions.map((ext) => 'layout.' + ext)
+  let dir = dirname(pageFilePath)
+
+  // We need to find the root layout for both pages and route handlers.
+  // Uses startsWith to not include directories further up.
+  while (dir.startsWith(appDir)) {
+    for (const potentialLayoutFile of potentialLayoutFiles) {
+      const layoutFile = join(dir, potentialLayoutFile)
+      if (!fs.existsSync(layoutFile)) {
+        continue
       }
-      // Walk up the directory tree
-      dir = join(dir, '..')
+      layoutFiles.push(layoutFile)
     }
+    // Walk up the directory tree
+    dir = join(dir, '..')
+  }
 
+  // inherit from layout files only if it's a page route
+  if (isAppPageRoute(page)) {
     for (const layoutFile of layoutFiles) {
       const layoutStaticInfo = await getAppPageStaticInfo({
         nextConfig,
@@ -165,6 +168,11 @@ export async function getStaticInfoIncludingLayouts({
     }
   }
 
+  const rootLayout = layoutFiles.at(-1)
+  const rootParams = rootLayout
+    ? getParamsFromLayoutFilePath({ appDir, layoutFilePath: rootLayout })
+    : []
+
   const config = reduceAppConfig(segments)
 
   return {
@@ -173,6 +181,7 @@ export async function getStaticInfoIncludingLayouts({
     runtime: config.runtime,
     preferredRegion: config.preferredRegion,
     maxDuration: config.maxDuration,
+    rootParams,
   }
 }
 
@@ -709,6 +718,7 @@ export async function createEntrypoints(
               page,
               name: serverBundlePath,
               pagePath: absolutePagePath,
+              rootParams: (staticInfo as AppPageStaticInfo).rootParams!,
               appDir,
               appPaths: matchedAppPaths,
               pageExtensions,
@@ -787,6 +797,7 @@ export async function createEntrypoints(
                 name: serverBundlePath,
                 page,
                 pagePath: absolutePagePath,
+                rootParams: (staticInfo as AppPageStaticInfo).rootParams!,
                 appDir: appDir!,
                 appPaths: matchedAppPaths,
                 pageExtensions,

packages/next/src/build/segment-config/app/collect-root-param-keys.ts

@@ -52,7 +52,7 @@ export function collectRootParamKeys({
   AppPageModule | AppRouteModule
 >): readonly string[] {
   if (isAppRouteRouteModule(routeModule)) {
-    return []
+    return routeModule.rootParamNames
   }
 
   if (isAppPageRouteModule(routeModule)) {

packages/next/src/build/templates/app-route.ts

@@ -37,10 +37,12 @@ import * as userland from 'VAR_USERLAND'
 // instead of a replacement because this could also be `undefined` instead of
 // an empty string.
 declare const nextConfigOutput: AppRouteRouteModuleOptions['nextConfigOutput']
+declare const rootParamNames: AppRouteRouteModuleOptions['rootParamNames']
 
-// We inject the nextConfigOutput here so that we can use them in the route
+// We inject nextConfigOutput and rootParamNames here so that we can use them in the route
 // module.
 // INJECT:nextConfigOutput
+// INJECT:rootParamNames
 
 const routeModule = new AppRouteRouteModule({
   definition: {
@@ -53,6 +55,7 @@ const routeModule = new AppRouteRouteModule({
   distDir: process.env.__NEXT_RELATIVE_DIST_DIR || '',
   projectDir: process.env.__NEXT_RELATIVE_PROJECT_DIR || '',
   resolvedPagePath: 'VAR_RESOLVED_PAGE_PATH',
+  rootParamNames,
   nextConfigOutput,
   userland,
 })

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

@@ -11,12 +11,14 @@ import { AppPathnameNormalizer } from '../../../../server/normalizers/built/app/
 import { loadEntrypoint } from '../../../load-entrypoint'
 import type { PageExtensions } from '../../../page-extensions-type'
 import { getFilenameAndExtension } from '../next-metadata-route-loader'
+import type { ParamInfo } from '../next-root-params-loader'
 
 export async function createAppRouteCode({
   appDir,
   name,
   page,
   pagePath,
+  rootParams,
   resolveAppRoute,
   pageExtensions,
   nextConfigOutput,
@@ -25,6 +27,7 @@ export async function createAppRouteCode({
   name: string
   page: string
   pagePath: string
+  rootParams: ParamInfo[]
   resolveAppRoute: (
     pathname: string
   ) => Promise<string | undefined> | string | undefined
@@ -78,6 +81,7 @@ export async function createAppRouteCode({
     },
     {
       nextConfigOutput: JSON.stringify(nextConfigOutput),
+      rootParamNames: JSON.stringify(rootParams.map((p) => p.param)),
     }
   )
 }

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

@@ -33,11 +33,13 @@ import type { PageExtensions } from '../../../page-extensions-type'
 import { PARALLEL_ROUTE_DEFAULT_PATH } from '../../../../client/components/builtin/default'
 import type { Compilation } from 'webpack'
 import { createAppRouteCode } from './create-app-route-code'
+import type { ParamInfo } from '../next-root-params-loader'
 
 export type AppLoaderOptions = {
   name: string
   page: string
   pagePath: string
+  rootParams: ParamInfo[]
   appDir: string
   appPaths: readonly string[] | null
   preferredRegion: string | string[] | undefined
@@ -548,6 +550,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
     appDir,
     appPaths,
     pagePath,
+    rootParams,
     pageExtensions,
     rootDir,
     tsconfigPath,
@@ -745,6 +748,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
       page: loaderOptions.page,
       name,
       pagePath,
+      rootParams,
       resolveAppRoute,
       pageExtensions,
       nextConfigOutput,

packages/next/src/build/webpack/loaders/next-root-params-loader.ts

@@ -158,9 +158,9 @@ async function findRootLayouts({
   return visit(appDir)
 }
 
-type ParamInfo = { param: string; type: DynamicParamTypes }
+export type ParamInfo = { param: string; type: DynamicParamTypes }
 
-function getParamsFromLayoutFilePath({
+export function getParamsFromLayoutFilePath({
   appDir,
   layoutFilePath,
 }: {

packages/next/src/server/async-storage/request-store.ts

@@ -135,6 +135,7 @@ export function createRequestStoreForRender(
 export function createRequestStoreForAPI(
   req: RequestContext['req'],
   url: RequestContext['url'],
+  rootParams: Params,
   implicitTags: RequestContext['implicitTags'],
   onUpdateCookies: RenderOpts['onUpdateCookies'],
   previewProps: WrapperRenderOpts['previewProps']
@@ -145,7 +146,7 @@ export function createRequestStoreForAPI(
     req,
     undefined,
     url,
-    {},
+    rootParams,
     implicitTags,
     onUpdateCookies,
     undefined,

packages/next/src/server/dev/hot-reloader-webpack.ts

@@ -90,6 +90,7 @@ import { getDisableDevIndicatorMiddleware } from '../../next-devtools/server/dev
 import getWebpackBundler from '../../shared/lib/get-webpack-bundler'
 import { getRestartDevServerMiddleware } from '../../next-devtools/server/restart-dev-server-middleware'
 import { checkPersistentCacheInvalidationAndCleanup } from '../../build/webpack/cache-invalidation'
+import type { AppPageStaticInfo } from '../../build/analysis/get-page-static-info'
 
 const MILLISECONDS_IN_NANOSECOND = BigInt(1_000_000)
 
@@ -957,6 +958,7 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
                           entryData.absolutePagePath
                         ).replace(/\\/g, '/')
                       ),
+                      rootParams: (staticInfo as AppPageStaticInfo).rootParams!,
                       appDir: this.appDir!,
                       pageExtensions: this.config.pageExtensions,
                       rootDir: this.dir,
@@ -1080,6 +1082,7 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
                     page,
                     appPaths: entryData.appPaths,
                     pagePath,
+                    rootParams: (staticInfo as AppPageStaticInfo).rootParams!,
                     appDir: this.appDir!,
                     pageExtensions: this.config.pageExtensions,
                     rootDir: this.dir,