feat: expose basePath in useRouter

docs/01-app/04-api-reference/04-functions/use-router.mdx

@@ -47,6 +47,7 @@ export default function Page() {
 - `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the provided route for faster client-side transitions.
 - `router.back()`: Navigate back to the previous route in the browser’s history stack.
 - `router.forward()`: Navigate forwards to the next page in the browser’s history stack.
+- `router.basePath`: The active [basePath](/docs/app/api-reference/config/next-config-js/basePath) (if enabled).
 
 > **Good to know**:
 >

docs/02-pages/03-api-reference/03-functions/use-router.mdx

@@ -40,7 +40,7 @@ The following is the definition of the `router` object returned by both [`useRou
 - `query`: `Object` - The query string parsed to an object, including [dynamic route](/docs/pages/building-your-application/routing/dynamic-routes) parameters. It will be an empty object during prerendering if the page doesn't use [Server-side Rendering](/docs/pages/building-your-application/data-fetching/get-server-side-props). Defaults to `{}`
 - `asPath`: `String` - The path as shown in the browser including the search params and respecting the `trailingSlash` configuration. `basePath` and `locale` are not included.
 - `isFallback`: `boolean` - Whether the current page is in [fallback mode](/docs/pages/api-reference/functions/get-static-paths#fallback-true).
-- `basePath`: `String` - The active [basePath](/docs/app/api-reference/config/next-config-js/basePath) (if enabled).
+- `basePath`: `String` - The active [basePath](/docs/pages/api-reference/config/next-config-js/basePath) (if enabled).
 - `locale`: `String` - The active locale (if enabled).
 - `locales`: `String[]` - All supported locales (if enabled).
 - `defaultLocale`: `String` - The current default locale (if enabled).

packages/next/src/client/app-index.tsx

@@ -190,6 +190,7 @@ function ServerRoot(): React.ReactNode {
       actionQueue={actionQueue}
       globalErrorComponentAndStyles={initialRSCPayload.G}
       assetPrefix={initialRSCPayload.p}
+      basePath={initialRSCPayload.a}
     />
   )
 

packages/next/src/client/components/app-router.tsx

@@ -242,9 +242,11 @@ function Head({
 function Router({
   actionQueue,
   assetPrefix,
+  basePath,
 }: {
   actionQueue: AppRouterActionQueue
   assetPrefix: string
+  basePath: string
 }) {
   const [state, dispatch] = useReducer(actionQueue)
   const { canonicalUrl } = useUnwrapState(state)
@@ -330,10 +332,11 @@ function Router({
           })
         }
       },
+      basePath,
     }
 
     return routerInstance
-  }, [actionQueue, dispatch, navigate])
+  }, [actionQueue, dispatch, navigate, basePath])
 
   useEffect(() => {
     // Exists for debugging purposes. Don't use in application code.
@@ -651,10 +654,12 @@ export default function AppRouter({
   actionQueue,
   globalErrorComponentAndStyles: [globalErrorComponent, globalErrorStyles],
   assetPrefix,
+  basePath,
 }: {
   actionQueue: AppRouterActionQueue
   globalErrorComponentAndStyles: [ErrorComponent, React.ReactNode | undefined]
   assetPrefix: string
+  basePath: string
 }) {
   useNavFailureHandler()
 
@@ -663,7 +668,11 @@ export default function AppRouter({
       errorComponent={globalErrorComponent}
       errorStyles={globalErrorStyles}
     >
-      <Router actionQueue={actionQueue} assetPrefix={assetPrefix} />
+      <Router
+        actionQueue={actionQueue}
+        assetPrefix={assetPrefix}
+        basePath={basePath}
+      />
     </ErrorBoundary>
   )
 }

packages/next/src/server/app-render/app-render.tsx

@@ -218,6 +218,7 @@ export type AppRenderContext = {
   pagePath: string
   clientReferenceManifest: DeepReadonly<ClientReferenceManifest>
   assetPrefix: string
+  basePath: string
   isNotFoundPath: boolean
   nonce: string | undefined
   res: BaseNextResponse
@@ -845,6 +846,7 @@ async function getRSCPayload(
     P: <Preloads preloadCallbacks={preloadCallbacks} />,
     b: ctx.sharedContext.buildId,
     p: ctx.assetPrefix,
+    a: ctx.basePath,
     c: prepareInitialCanonicalUrl(url),
     i: !!couldBeIntercepted,
     f: [
@@ -964,6 +966,7 @@ async function getErrorRSCPayload(
   return {
     b: ctx.sharedContext.buildId,
     p: ctx.assetPrefix,
+    a: ctx.basePath,
     c: prepareInitialCanonicalUrl(url),
     m: undefined,
     i: false,
@@ -1033,6 +1036,7 @@ function App<T>({
           actionQueue={actionQueue}
           globalErrorComponentAndStyles={response.G}
           assetPrefix={response.p}
+          basePath={response.a}
         />
       </ServerInsertedHTMLProvider>
     </HeadManagerContext.Provider>
@@ -1081,6 +1085,7 @@ function AppWithoutContext<T>({
       actionQueue={actionQueue}
       globalErrorComponentAndStyles={response.G}
       assetPrefix={response.p}
+      basePath={response.a}
     />
   )
 }
@@ -1124,6 +1129,7 @@ async function renderToHTMLOrFlightImpl(
     nextFontManifest,
     serverActions,
     assetPrefix = '',
+    basePath = '',
     enableTainting,
   } = renderOpts
 
@@ -1273,6 +1279,7 @@ async function renderToHTMLOrFlightImpl(
     nonce,
     res,
     sharedContext,
+    basePath,
   }
 
   getTracer().setRootSpanAttribute('next.route', pagePath)

packages/next/src/server/app-render/types.ts

@@ -258,6 +258,8 @@ export type InitialRSCPayload = {
   b: string
   /** assetPrefix */
   p: string
+  /** basePath */
+  a: string
   /** initialCanonicalUrlParts */
   c: string[]
   /** couldBeIntercepted */

packages/next/src/shared/lib/app-router-context.shared-runtime.ts

@@ -148,6 +148,10 @@ export interface AppRouterInstance {
    * Prefetch the provided href.
    */
   prefetch(href: string, options?: PrefetchOptions): void
+  /**
+   * The configured app's basePath.
+   */
+  basePath: string
 }
 
 export const AppRouterContext = React.createContext<AppRouterInstance | null>(

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

@@ -11,6 +11,7 @@ describe('adaptForAppRouterInstance', () => {
     push: jest.fn(),
     replace: jest.fn(),
     prefetch: jest.fn(),
+    basePath: '/base-path',
   } as unknown as NextRouter
 
   const adapter = adaptForAppRouterInstance(router)
@@ -62,4 +63,9 @@ describe('adaptForAppRouterInstance', () => {
     adapter.prefetch('/foo')
     expect(router.prefetch).toHaveBeenCalledWith('/foo')
   })
+
+  it('should forward the basePath to `basePath`', () => {
+    const basePath = adapter.basePath
+    expect(basePath).toEqual('/base-path')
+  })
 })

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

@@ -32,6 +32,7 @@ export function adaptForAppRouterInstance(
     prefetch(href) {
       void pagesRouter.prefetch(href)
     },
+    basePath: pagesRouter.basePath,
   }
 }
 

test/e2e/app-dir/app-basepath/app/page.js

@@ -1,9 +1,15 @@
+'use client'
+
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 
 export default function Page() {
+  const router = useRouter()
+
   return (
     <div>
       <h1>Test Page</h1>
+      <p id="base-path">{router.basePath}</p>
       <Link href="/another">Go to page 2</Link>
     </div>
   )

test/e2e/app-dir/app-basepath/index.test.ts

@@ -21,6 +21,11 @@ describe('app dir - basepath', () => {
     expect(html).toContain('<h1>Test Page</h1>')
   })
 
+  it('useRouter should correctly return `basePath`', async () => {
+    const html = await next.render('/base')
+    expect(html).toContain('<p id="base-path">/base</p>')
+  })
+
   it('should support Link with basePath prefixed', async () => {
     const browser = await next.browser('/base')
     expect(