Expose basePath as router field

vercel · Jan 8, 2020 · ce68478 · ce68478
1 parent 895e41f
commit ce68478
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 8 deletions.
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -211,6 +211,7 @@ const nextServerlessLoader: loader.Loader = function() {
         canonicalBase: "${canonicalBase}",
         buildId: "${buildId}",
         assetPrefix: "${assetPrefix}",
+        basePath: "${basePath}",
         ..._renderOpts
       }
       let sprData = false

diff --git a/packages/next/client/router.ts b/packages/next/client/router.ts
@@ -29,7 +29,14 @@ const singletonRouter: SingletonRouterBase = {
 }
 
 // Create public properties and methods of the router in the singletonRouter
-const urlPropertyFields = ['pathname', 'route', 'query', 'asPath', 'components']
+const urlPropertyFields = [
+  'pathname',
+  'route',
+  'query',
+  'asPath',
+  'components',
+  'basePath',
+]
 const routerEvents = [
   'routeChangeStart',
   'beforeHistoryChange',

diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
@@ -230,6 +230,7 @@ export default async function(
     dev: false,
     staticMarkup: false,
     hotReloader: null,
+    basePath: nextConfig.experimental.basePath,
     canonicalBase: nextConfig.amp?.canonicalBase || '',
     isModern: nextConfig.experimental.modern,
     ampValidator: nextConfig.experimental.amp?.validator || undefined,

diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
@@ -41,6 +41,7 @@ export type BaseRouter = {
   pathname: string
   query: ParsedUrlQuery
   asPath: string
+  basePath: string
 }
 
 export type NextRouter = BaseRouter &
@@ -73,6 +74,8 @@ export default class Router implements BaseRouter {
   pathname: string
   query: ParsedUrlQuery
   asPath: string
+  basePath: string
+
   /**
    * Map of all components loaded in `Router`
    */
@@ -138,6 +141,7 @@ export default class Router implements BaseRouter {
     this.asPath =
       // @ts-ignore this is temporarily global (attached to window)
       isDynamicRoute(pathname) && __NEXT_DATA__.autoExport ? pathname : as
+    this.basePath = basePath
     this.sub = subscription
     this.clc = null
     this._wrapApp = wrapApp

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -101,6 +101,7 @@ export default class Server {
     documentMiddlewareEnabled: boolean
     hasCssMode: boolean
     dev?: boolean
+    basePath: string
   }
   private compression?: Middleware
   private onErrorMiddleware?: ({ err }: { err: Error }) => Promise<void>
@@ -148,6 +149,7 @@ export default class Server {
       staticMarkup,
       buildId: this.buildId,
       generateEtags,
+      basePath: this.nextConfig.experimental.basePath,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
@@ -51,15 +51,22 @@ class ServerRouter implements NextRouter {
   pathname: string
   query: ParsedUrlQuery
   asPath: string
+  basePath: string
   events: any
   // TODO: Remove in the next major version, as this would mean the user is adding event listeners in server-side `render` method
   static events: MittEmitter = mitt()
 
-  constructor(pathname: string, query: ParsedUrlQuery, as: string) {
+  constructor(
+    pathname: string,
+    query: ParsedUrlQuery,
+    as: string,
+    basePath: string
+  ) {
     this.route = pathname.replace(/\/$/, '') || '/'
     this.pathname = pathname
     this.query = query
     this.asPath = as
+    this.basePath = basePath
   }
   push(): any {
     noRouter()
@@ -155,6 +162,7 @@ type RenderOpts = {
     revalidate?: number | boolean
   }
   unstable_getStaticPaths?: () => void
+  basePath: string
 }
 
 function renderDocument(
@@ -272,6 +280,7 @@ export async function renderToHTML(
     ErrorDebug,
     unstable_getStaticProps,
     unstable_getStaticPaths,
+    basePath,
   } = renderOpts
 
   const callMiddleware = async (method: string, args: any[], props = false) => {
@@ -369,7 +378,7 @@ export async function renderToHTML(
 
   // @ts-ignore url will always be set
   const asPath: string = req.url
-  const router = new ServerRouter(pathname, query, asPath)
+  const router = new ServerRouter(pathname, query, asPath, basePath)
   const ctx = {
     err,
     req: isAutoExport ? undefined : req,

diff --git a/test/integration/basepath/pages/hello.js b/test/integration/basepath/pages/hello.js
@@ -1,9 +1,13 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 export default () => (
-  <Link href="/other-page">
-    <a id="other-page-link">
-      <h1>Hello World</h1>
-    </a>
-  </Link>
+  <>
+    <Link href="/other-page">
+      <a id="other-page-link">
+        <h1>Hello World</h1>
+      </a>
+    </Link>
+    <div id="base-path">{useRouter().basePath}</div>
+  </>
 )
diff --git a/test/integration/basepath/test/index.test.js b/test/integration/basepath/test/index.test.js
@@ -73,6 +73,12 @@ const runTests = (context, dev = false) => {
     }
   })
 
+  it('should have basePath field on Router', async () => {
+    const html = await renderViaHTTP(context.appPort, '/docs/hello')
+    const $ = cheerio.load(html)
+    expect($('#base-path').text()).toBe('/docs')
+  })
+
   it('should navigate to the page without refresh', async () => {
     const browser = await webdriver(context.appPort, '/docs/hello')
     try {