refactor: isolate the params type (#67981)

This just collects all the route parameter types to a single definition.

packages/next/src/build/utils.ts

@@ -89,6 +89,7 @@ import type { PageExtensions } from './page-extensions-type'
 import { formatDynamicImportPath } from '../lib/format-dynamic-import-path'
 import { isInterceptionRouteAppPath } from '../server/lib/interception-routes'
 import { checkIsRoutePPREnabled } from '../server/lib/experimental/ppr'
+import type { Params } from '../client/components/params'
 
 export type ROUTER_TYPE = 'pages' | 'app'
 
@@ -1194,8 +1195,6 @@ export type AppConfig = {
   experimental_ppr?: boolean
 }
 
-type Params = Record<string, string | string[]>
-
 type GenerateStaticParams = (options: { params?: Params }) => Promise<Params[]>
 
 type GenerateParamsResult = {

packages/next/src/client/components/navigation.ts

@@ -13,6 +13,7 @@ import {
 import { getSegmentValue } from './router-reducer/reducers/get-segment-value'
 import { PAGE_SEGMENT_KEY, DEFAULT_SEGMENT_KEY } from '../../shared/lib/segment'
 import { ReadonlyURLSearchParams } from './navigation.react-server'
+import type { Params } from './params'
 
 /**
  * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
@@ -120,10 +121,6 @@ export function useRouter(): AppRouterInstance {
   return router
 }
 
-interface Params {
-  [key: string]: string | string[]
-}
-
 /**
  * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
  * that lets you read a route's dynamic params filled in by the current URL.

packages/next/src/client/components/params.ts

@@ -0,0 +1 @@
+export type Params = Record<string, string | string[] | undefined>

packages/next/src/client/components/router-reducer/compute-changed-path.ts

@@ -3,7 +3,7 @@ import type {
   Segment,
 } from '../../../server/app-render/types'
 import { INTERCEPTION_ROUTE_MARKERS } from '../../../server/lib/interception-routes'
-import type { Params } from '../../../shared/lib/router/utils/route-matcher'
+import type { Params } from '../params'
 import {
   isGroupSegment,
   DEFAULT_SEGMENT_KEY,

packages/next/src/export/routes/app-route.ts

@@ -27,6 +27,7 @@ import { isStaticGenEnabled } from '../../server/route-modules/app-route/helpers
 import type { ExperimentalConfig } from '../../server/config-shared'
 import { isMetadataRouteFile } from '../../lib/metadata/is-metadata-route'
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
+import type { Params } from '../../client/components/params'
 
 export const enum ExportedAppRouteFiles {
   BODY = 'BODY',
@@ -36,7 +37,7 @@ export const enum ExportedAppRouteFiles {
 export async function exportAppRoute(
   req: MockedRequest,
   res: MockedResponse,
-  params: { [key: string]: string | string[] } | undefined,
+  params: Params | undefined,
   page: string,
   incrementalCache: IncrementalCache | undefined,
   distDir: string,

packages/next/src/export/worker.ts

@@ -39,6 +39,7 @@ import {
   turborepoTraceAccess,
   TurborepoAccessTraceResult,
 } from '../build/turborepo-access-trace'
+import type { Params } from '../client/components/params'
 
 const envConfig = require('../shared/lib/runtime-config.external')
 
@@ -100,8 +101,6 @@ async function exportPageImpl(
     const isDynamic = isDynamicRoute(page)
     const outDir = isAppDir ? join(distDir, 'server/app') : input.outDir
 
-    let params: { [key: string]: string | string[] } | undefined
-
     const filePath = normalizePagePath(path)
     const ampPath = `${filePath}.amp`
     let renderAmpPath = ampPath
@@ -138,6 +137,8 @@ async function exportPageImpl(
       input.renderOpts.locales
     )
 
+    let params: Params | undefined
+
     if (isDynamic && page !== nonLocalizedPath) {
       const normalizedPage = isAppDir ? normalizeAppPath(page) : page
 

packages/next/src/server/app-render/create-component-tree.tsx

@@ -19,10 +19,7 @@ import { getTracer } from '../lib/trace/tracer'
 import { NextNodeServerSpan } from '../lib/trace/constants'
 import { StaticGenBailoutError } from '../../client/components/static-generation-bailout'
 import type { LoadingModuleData } from '../../shared/lib/app-router-context.shared-runtime'
-
-type Params = {
-  [key: string]: string | string[]
-}
+import type { Params } from '../../client/components/params'
 
 /**
  * Use the provided loader tree to create the React Component tree.

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

@@ -2,7 +2,7 @@ import type { __ApiPreviewProps } from './api-utils'
 import type { FontManifest, FontConfig } from './font-utils'
 import type { LoadComponentsReturnType } from './load-components'
 import type { MiddlewareRouteMatch } from '../shared/lib/router/utils/middleware-route-matcher'
-import type { Params } from '../shared/lib/router/utils/route-matcher'
+import type { Params } from '../client/components/params'
 import type { NextConfig, NextConfigComplete } from './config-shared'
 import type {
   NextParsedUrlQuery,

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

@@ -1,7 +1,7 @@
 import type { FindComponentsResult } from '../next-server'
 import type { LoadComponentsReturnType } from '../load-components'
 import type { Options as ServerOptions } from '../next-server'
-import type { Params } from '../../shared/lib/router/utils/route-matcher'
+import type { Params } from '../../client/components/params'
 import type { ParsedUrl } from '../../shared/lib/router/utils/parse-url'
 import type { ParsedUrlQuery } from 'querystring'
 import type { UrlWithParsedQuery } from 'url'

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

@@ -14,7 +14,7 @@ import type { FetchEventResult } from './web/types'
 import type { PrerenderManifest } from '../build'
 import type { PagesManifest } from '../build/webpack/plugins/pages-manifest-plugin'
 import type { NextParsedUrlQuery, NextUrlWithParsedQuery } from './request-meta'
-import type { Params } from '../shared/lib/router/utils/route-matcher'
+import type { Params } from '../client/components/params'
 import type { MiddlewareRouteMatch } from '../shared/lib/router/utils/middleware-route-matcher'
 import type { RouteMatch } from './route-matches/route-match'
 import type { IncomingMessage, ServerResponse } from 'http'

packages/next/src/server/route-matchers/route-matcher.ts

@@ -1,5 +1,6 @@
 import type { RouteMatch } from '../route-matches/route-match'
 import type { RouteDefinition } from '../route-definitions/route-definition'
+import type { Params } from '../../client/components/params'
 
 import { isDynamicRoute } from '../../shared/lib/router/utils'
 import {
@@ -9,7 +10,7 @@ import {
 import { getRouteRegex } from '../../shared/lib/router/utils/route-regex'
 
 type RouteMatchResult = {
-  params?: Record<string, string | string[]>
+  params?: Params
 }
 
 export class RouteMatcher<D extends RouteDefinition = RouteDefinition> {

packages/next/src/server/route-matches/route-match.ts

@@ -1,3 +1,4 @@
+import type { Params } from '../../client/components/params'
 import type { RouteDefinition } from '../route-definitions/route-definition'
 
 /**
@@ -12,5 +13,5 @@ export interface RouteMatch<D extends RouteDefinition = RouteDefinition> {
    * the incoming request pathname. If a route match is returned without any
    * params, it should be considered a static route.
    */
-  readonly params: Record<string, string | string[]> | undefined
+  readonly params: Params | undefined
 }

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

@@ -1,7 +1,7 @@
 import type { WebNextRequest, WebNextResponse } from './base-http/web'
 import type RenderResult from './render-result'
 import type { NextParsedUrlQuery, NextUrlWithParsedQuery } from './request-meta'
-import type { Params } from '../shared/lib/router/utils/route-matcher'
+import type { Params } from '../client/components/params'
 import type { LoadComponentsReturnType } from './load-components'
 import type {
   LoadedRenderOpts,

packages/next/src/server/web/types.ts

@@ -27,7 +27,7 @@ export interface RequestData {
   }
   page?: {
     name?: string
-    params?: { [key: string]: string | string[] }
+    params?: { [key: string]: string | string[] | undefined }
   }
   url: string
   body?: ReadableStream<Uint8Array>

packages/next/src/shared/lib/hooks-client-context.shared-runtime.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext } from 'react'
-import type { Params } from '../../shared/lib/router/utils/route-matcher'
+import type { Params } from '../../client/components/params'
 
 export const SearchParamsContext = createContext<URLSearchParams | null>(null)
 export const PathnameContext = createContext<string | null>(null)

packages/next/src/shared/lib/router/adapters.tsx

@@ -1,5 +1,5 @@
 import type { AppRouterInstance } from '../app-router-context.shared-runtime'
-import type { Params } from './utils/route-matcher'
+import type { Params } from '../../../client/components/params'
 import type { NextRouter } from './router'
 
 import React, { useMemo, useRef } from 'react'

packages/next/src/shared/lib/router/router.ts

@@ -43,6 +43,7 @@ import { isBot } from './utils/is-bot'
 import { omit } from './utils/omit'
 import { interpolateAs } from './utils/interpolate-as'
 import { handleSmoothScroll } from './utils/handle-smooth-scroll'
+import type { Params } from '../../../client/components/params'
 
 declare global {
   interface Window {
@@ -1486,7 +1487,7 @@ export default class Router implements BaseRouter {
     resolvedAs = removeLocale(removeBasePath(resolvedAs), nextState.locale)
 
     route = removeTrailingSlash(pathname)
-    let routeMatch: { [paramName: string]: string | string[] } | false = false
+    let routeMatch: Params | false = false
 
     if (isDynamicRoute(route)) {
       const parsedAs = parseRelativeUrl(resolvedAs)

packages/next/src/shared/lib/router/utils/middleware-route-matcher.ts

@@ -1,6 +1,6 @@
 import type { BaseNextRequest } from '../../../../server/base-http'
 import type { MiddlewareMatcher } from '../../../../build/analysis/get-page-static-info'
-import type { Params } from './route-matcher'
+import type { Params } from '../../../../client/components/params'
 import { matchHas } from './prepare-destination'
 
 export interface MiddlewareRouteMatch {

packages/next/src/shared/lib/router/utils/prepare-destination.ts

@@ -1,7 +1,6 @@
 import type { IncomingMessage } from 'http'
 import type { Key } from 'next/dist/compiled/path-to-regexp'
 import type { NextParsedUrlQuery } from '../../../../server/request-meta'
-import type { Params } from './route-matcher'
 import type { RouteHas } from '../../../../lib/load-custom-routes'
 import type { BaseNextRequest } from '../../../../server/base-http'
 
@@ -14,6 +13,7 @@ import {
 } from '../../../../server/lib/interception-routes'
 import { NEXT_RSC_UNION_QUERY } from '../../../../client/components/app-router-headers'
 import { getCookieParser } from '../../../../server/api-utils/get-cookie-parser'
+import type { Params } from '../../../../client/components/params'
 
 /**
  * Ensure only a-zA-Z are used for param names for proper interpolating
@@ -55,7 +55,7 @@ export function matchHas(
   const params: Params = {}
 
   const hasMatch = (hasItem: RouteHas) => {
-    let value: undefined | string
+    let value
     let key = hasItem.key
 
     switch (hasItem.type) {

packages/next/src/shared/lib/router/utils/route-matcher.ts

@@ -1,14 +1,11 @@
 import type { RouteRegex } from './route-regex'
 import { DecodeError } from '../../utils'
+import type { Params } from '../../../../client/components/params'
 
 export interface RouteMatchFn {
   (pathname: string | null | undefined): false | Params
 }
 
-export interface Params {
-  [param: string]: any
-}
-
 export function getRouteMatcher({ re, groups }: RouteRegex): RouteMatchFn {
   return (pathname: string | null | undefined) => {
     const routeMatch = re.exec(pathname!)