fix: third arg after rebase

Author: bgub

packages/next/src/cli/next-typegen.ts

@@ -129,7 +129,11 @@ const nextTypegen = async (
     rewrites: nextConfig.rewrites,
   })
 
-  await writeRouteTypesManifest(routeTypesManifest, routeTypesFilePath)
+  await writeRouteTypesManifest(
+    routeTypesManifest,
+    routeTypesFilePath,
+    nextConfig
+  )
 
   console.log('✓ Route types generated successfully')
 }

packages/next/src/server/lib/router-utils/route-types-utils.ts

@@ -6,7 +6,7 @@ import {
 import type { NextConfigComplete } from '../../config-shared'
 import { isParallelRouteSegment } from '../../../shared/lib/segment'
 import fs from 'fs'
-import { generateRouteTypesFile } from './typegen'
+import { generateRouteTypesFile, generateLinkTypesFile } from './typegen'
 import { tryToParsePath } from '../../../lib/try-to-parse-path'
 
 interface RouteInfo {
@@ -27,46 +27,71 @@ export interface RouteTypesManifest {
 // Convert a custom-route source string (`/blog/:slug`, `/docs/:path*`, ...)
 // into the bracket-syntax used by other Next.js route helpers so that we can
 // reuse `getRouteRegex()` to extract groups.
-export function convertCustomRouteSource(source: string): string {
+export function convertCustomRouteSource(source: string): string[] {
   const parseResult = tryToParsePath(source)
 
   if (parseResult.error || !parseResult.tokens) {
     // Fallback to original source if parsing fails
-    return source.startsWith('/') ? source : '/' + source
+    return source.startsWith('/') ? [source] : ['/' + source]
   }
 
-  let result = ''
+  const possibleNormalizedRoutes = ['']
+  let slugCnt = 1
+
+  function append(suffix: string) {
+    for (let i = 0; i < possibleNormalizedRoutes.length; i++) {
+      possibleNormalizedRoutes[i] += suffix
+    }
+  }
+
+  function fork(suffix: string) {
+    const currentLength = possibleNormalizedRoutes.length
+    for (let i = 0; i < currentLength; i++) {
+      possibleNormalizedRoutes.push(possibleNormalizedRoutes[i] + suffix)
+    }
+  }
 
   for (const token of parseResult.tokens) {
-    if (typeof token === 'string') {
-      // Literal path segment
-      result += token
-    } else {
-      // Parameter token
-      const { name, modifier, prefix } = token
-
-      // Add the prefix (usually '/')
-      result += prefix
-
-      if (modifier === '*') {
-        // Catch-all zero or more: :param* -> [[...param]]
-        result += `[[...${name}]]`
-      } else if (modifier === '+') {
-        // Catch-all one or more: :param+ -> [...param]
-        result += `[...${name}]`
-      } else if (modifier === '?') {
-        // Optional catch-all: :param? -> [[...param]]
-        result += `[[...${name}]]`
-      } else {
-        // Standard dynamic segment: :param -> [param]
-        result += `[${name}]`
+    if (typeof token === 'object') {
+      // Make sure the slug is always named.
+      const slug = token.name || (slugCnt++ === 1 ? 'slug' : `slug${slugCnt}`)
+      if (token.modifier === '*') {
+        append(`${token.prefix}[[...${slug}]]`)
+      } else if (token.modifier === '+') {
+        append(`${token.prefix}[...${slug}]`)
+      } else if (token.modifier === '') {
+        if (token.pattern === '[^\\/#\\?]+?') {
+          // A safe slug
+          append(`${token.prefix}[${slug}]`)
+        } else if (token.pattern === '.*') {
+          // An optional catch-all slug
+          append(`${token.prefix}[[...${slug}]]`)
+        } else if (token.pattern === '.+') {
+          // A catch-all slug
+          append(`${token.prefix}[...${slug}]`)
+        } else {
+          // Other regex patterns are not supported. Skip this route.
+          return []
+        }
+      } else if (token.modifier === '?') {
+        if (/^[a-zA-Z0-9_/]*$/.test(token.pattern)) {
+          // An optional slug with plain text only, fork the route.
+          append(token.prefix)
+          fork(token.pattern)
+        } else {
+          // Optional modifier `?` and regex patterns are not supported.
+          return []
+        }
       }
+    } else if (typeof token === 'string') {
+      append(token)
     }
   }
 
   // Ensure leading slash
-  if (!result.startsWith('/')) result = '/' + result
-  return result
+  return possibleNormalizedRoutes.map((route) =>
+    route.startsWith('/') ? route : '/' + route
+  )
 }
 
 /**
@@ -165,11 +190,12 @@ export async function createRouteTypesManifest({
     const rd = await redirects()
 
     for (const item of rd) {
-      const source = convertCustomRouteSource(item.source)
-
-      manifest.redirectRoutes[source] = {
-        path: source,
-        groups: extractRouteParams(source),
+      const possibleRoutes = convertCustomRouteSource(item.source)
+      for (const route of possibleRoutes) {
+        manifest.redirectRoutes[route] = {
+          path: route,
+          groups: extractRouteParams(route),
+        }
       }
     }
   }
@@ -187,10 +213,12 @@ export async function createRouteTypesManifest({
         ]
 
     for (const item of allSources) {
-      const source = convertCustomRouteSource(item.source)
-      manifest.rewriteRoutes[source] = {
-        path: source,
-        groups: extractRouteParams(source),
+      const possibleRoutes = convertCustomRouteSource(item.source)
+      for (const route of possibleRoutes) {
+        manifest.rewriteRoutes[route] = {
+          path: route,
+          groups: extractRouteParams(route),
+        }
       }
     }
   }
@@ -209,8 +237,12 @@ export async function writeRouteTypesManifest(
     await fs.promises.mkdir(dirname, { recursive: true })
   }
 
-  await fs.promises.writeFile(
-    filePath,
-    generateRouteTypesFile(manifest, config)
-  )
+  // Write the main routes.d.ts file
+  await fs.promises.writeFile(filePath, generateRouteTypesFile(manifest))
+
+  // Write the link.d.ts file if typedRoutes is enabled
+  if (config.experimental?.typedRoutes === true) {
+    const linkTypesPath = path.join(dirname, 'link.d.ts')
+    await fs.promises.writeFile(linkTypesPath, generateLinkTypesFile(manifest))
+  }
 }

packages/next/src/server/lib/router-utils/typegen.ts

@@ -1,6 +1,5 @@
 import type { RouteTypesManifest } from './route-types-utils'
 import { isDynamicRoute } from '../../../shared/lib/router/utils/is-dynamic'
-import type { NextConfigComplete } from '../../config-shared'
 
 function generateRouteTypes(routesManifest: RouteTypesManifest): string {
   const appRoutes = Object.keys(routesManifest.appRoutes).sort()
@@ -175,19 +174,13 @@ function serializeRouteTypes(routeTypes: string[]) {
     .join('')
 }
 
-export function generateRouteTypesFile(
-  routesManifest: RouteTypesManifest,
-  config: NextConfigComplete
+export function generateLinkTypesFile(
+  routesManifest: RouteTypesManifest
 ): string {
-  const routeTypes = generateRouteTypes(routesManifest)
-  const paramTypes = generateParamTypes(routesManifest)
-  const layoutSlotMap = generateLayoutSlotMap(routesManifest)
-
   // Generate serialized static and dynamic routes for the internal namespace
   const allRoutes = {
     ...routesManifest.appRoutes,
     ...routesManifest.pageRoutes,
-    ...routesManifest.layoutRoutes,
     ...routesManifest.redirectRoutes,
     ...routesManifest.rewriteRoutes,
   }
@@ -217,51 +210,6 @@ export function generateRouteTypesFile(
   return `// This file is generated automatically by Next.js
 // Do not edit this file manually
 
-${routeTypes}
-
-${paramTypes}
-
-export type ParamsOf<Route extends Routes> = ParamMap[Route]
-
-${layoutSlotMap}
-
-export type { AppRoutes, PageRoutes, LayoutRoutes, RedirectRoutes, RewriteRoutes }
-
-declare global {
-  /**
-   * Props for Next.js App Router page components
-   * @example
-   * \`\`\`tsx
-   * export default function Page(props: PageProps<'/blog/[slug]'>) {
-   *   const { slug } = await props.params
-   *   return <div>Blog post: {slug}</div>
-   * }
-   * \`\`\`
-   */
-  interface PageProps<AppRoute extends AppRoutes> {
-    params: Promise<ParamMap[AppRoute]>
-    searchParams: Promise<Record<string, string | string[] | undefined>>
-  }
-  
-  /**
-   * Props for Next.js App Router layout components
-   * @example
-   * \`\`\`tsx
-   * export default function Layout(props: LayoutProps<'/dashboard'>) {
-   *   return <div>{props.children}</div>
-   * }
-   * \`\`\`
-   */
-  type LayoutProps<LayoutRoute extends LayoutRoutes> = {
-    params: Promise<ParamMap[LayoutRoute]>
-    children: React.ReactNode
-  } & {
-    [K in LayoutSlotMap[LayoutRoute]]: React.ReactNode
-  }
-}
-${
-  config.experimental?.typedRoutes === true
-    ? `
 // Type definitions for Next.js routes
 
 /**
@@ -390,7 +338,59 @@ declare module 'next/form' {
   export default function Form<RouteType>(props: FormProps<RouteType>): JSX.Element
 }
 `
-    : ''
+}
+
+export function generateRouteTypesFile(
+  routesManifest: RouteTypesManifest
+): string {
+  const routeTypes = generateRouteTypes(routesManifest)
+  const paramTypes = generateParamTypes(routesManifest)
+  const layoutSlotMap = generateLayoutSlotMap(routesManifest)
+
+  return `// This file is generated automatically by Next.js
+// Do not edit this file manually
+
+${routeTypes}
+
+${paramTypes}
+
+export type ParamsOf<Route extends Routes> = ParamMap[Route]
+
+${layoutSlotMap}
+
+export type { AppRoutes, PageRoutes, LayoutRoutes, RedirectRoutes, RewriteRoutes }
+
+declare global {
+  /**
+   * Props for Next.js App Router page components
+   * @example
+   * \`\`\`tsx
+   * export default function Page(props: PageProps<'/blog/[slug]'>) {
+   *   const { slug } = await props.params
+   *   return <div>Blog post: {slug}</div>
+   * }
+   * \`\`\`
+   */
+  interface PageProps<AppRoute extends AppRoutes> {
+    params: Promise<ParamMap[AppRoute]>
+    searchParams: Promise<Record<string, string | string[] | undefined>>
+  }
+  
+  /**
+   * Props for Next.js App Router layout components
+   * @example
+   * \`\`\`tsx
+   * export default function Layout(props: LayoutProps<'/dashboard'>) {
+   *   return <div>{props.children}</div>
+   * }
+   * \`\`\`
+   */
+  type LayoutProps<LayoutRoute extends LayoutRoutes> = {
+    params: Promise<ParamMap[LayoutRoute]>
+    children: React.ReactNode
+  } & {
+    [K in LayoutSlotMap[LayoutRoute]]: React.ReactNode
+  }
 }
 `
 }

test/e2e/app-dir/typed-routes/next.config.js

@@ -17,11 +17,6 @@ const nextConfig = {
         destination: '/posts/:category/:slug*',
         permanent: false,
       },
-      {
-        source: '/optional/:param?',
-        destination: '/fallback',
-        permanent: false,
-      },
     ]
   },
   async rewrites() {

test/e2e/app-dir/typed-routes/typed-links.test.ts

@@ -11,7 +11,7 @@ describe('typed-links', () => {
   }
 
   it('should generate types for next/link', async () => {
-    const dts = await next.readFile('.next/types/routes.d.ts')
+    const dts = await next.readFile('.next/types/link.d.ts')
     expect(dts).toContain(`declare module 'next/link'`)
   })
 

test/e2e/app-dir/typed-routes/typed-routes.test.ts

@@ -4,7 +4,7 @@ const expectedDts = `
 type AppRoutes = "/" | "/_shop/[[...category]]" | "/dashboard" | "/dashboard/settings" | "/docs/[...slug]" | "/gallery/photo/[id]" | "/project/[slug]"
 type PageRoutes = "/about" | "/users/[id]"
 type LayoutRoutes = "/" | "/dashboard"
-type RedirectRoutes = "/blog/[category]/[[...slug]]" | "/optional/[[...param]]" | "/project/[slug]"
+type RedirectRoutes = "/blog/[category]/[[...slug]]" | "/project/[slug]"
 type RewriteRoutes = "/api-legacy/[version]/[[...endpoint]]" | "/docs-old/[...path]"
 type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRoutes
 `
@@ -36,9 +36,6 @@ describe('typed-routes', () => {
     // Test catch-all zero-or-more: :slug* -> [[...slug]]
     expect(dts).toContain('"/blog/[category]/[[...slug]]"')
     expect(dts).toContain('"/api-legacy/[version]/[[...endpoint]]"')
-
-    // Test optional parameter: :param? -> [[...param]]
-    expect(dts).toContain('"/optional/[[...param]]"')
   })
 
   if (isNextDev) {