Ensure multi-level basePath works properly

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

@@ -970,8 +970,19 @@ export default class Server {
 
           // if basePath is defined require it be present
           if (basePath) {
-            if (pathParts[0] !== basePath.substr(1)) return { finished: false }
-            pathParts.shift()
+            const basePathParts = basePath.split('/')
+            // remove first empty value
+            basePathParts.shift()
+
+            if (
+              !basePathParts.every((part: string, idx: number) => {
+                return part === pathParts[idx]
+              })
+            ) {
+              return { finished: false }
+            }
+
+            pathParts.splice(0, basePathParts.length)
           }
 
           const path = `/${pathParts.join('/')}`

test/integration/basepath/pages/absolute-url-basepath.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 export async function getServerSideProps({ query: { port } }) {
   if (!port) {
@@ -9,10 +10,14 @@ export async function getServerSideProps({ query: { port } }) {
 }
 
 export default function Page({ port }) {
+  const router = useRouter()
   return (
     <>
-      <Link href={`http://localhost:${port}/docs/something-else`}>
-        <a id="absolute-link">http://localhost:{port}/docs/something-else</a>
+      <Link href={`http://localhost:${port}${router.basePath}/something-else`}>
+        <a id="absolute-link">
+          http://localhost:{port}
+          {router.basePath}/something-else
+        </a>
       </Link>
     </>
   )

test/integration/basepath/pages/invalid-manual-basepath.js

@@ -1,8 +1,9 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 export default () => (
   <>
-    <Link href="/docs/other-page">
+    <Link href={`${useRouter().basePath}/other-page`}>
       <a id="other-page-link">
         <h1>Hello World</h1>
       </a>