diff --git a/packages/theme/components/layout/index-cards/IndexCards.tsx b/packages/theme/components/layout/index-cards/IndexCards.tsx
index 5f8ba6b..370f8e0 100644
--- a/packages/theme/components/layout/index-cards/IndexCards.tsx
+++ b/packages/theme/components/layout/index-cards/IndexCards.tsx
@@ -22,7 +22,6 @@ type DocsItem = (MdxFile | FolderWithoutChildren) & {
 }
 
 export function IndexCards({route, folderData}: IndexCardsProps) {
-  const {basePath} = useRouter()
   const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
 
   return (
@@ -31,7 +30,7 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
         if (item.kind !== 'MdxPage') return null
         return (
           <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
-            <Card href={`${basePath}${item.route}`} hasBorder style={{width: '100%'}}>
+            <Card href={item.route} hasBorder style={{width: '100%'}}>
               {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
               {item.frontMatter && item.frontMatter.description && (
                 <Card.Description>{item.frontMatter.description}</Card.Description>
diff --git a/packages/theme/components/layout/root-layout/Theme.tsx b/packages/theme/components/layout/root-layout/Theme.tsx
index f312eeb..d4639e4 100644
--- a/packages/theme/components/layout/root-layout/Theme.tsx
+++ b/packages/theme/components/layout/root-layout/Theme.tsx
@@ -1,4 +1,5 @@
 import React, {useMemo} from 'react'
+import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
@@ -36,7 +37,7 @@ const {publicRuntimeConfig} = getConfig()
 
 export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
   const {title, frontMatter, headings, filePath, pageMap, route} = pageOpts
-  const {locale = 'en-US', defaultLocale, basePath} = useRouter()
+  const {locale = 'en-US', defaultLocale} = useRouter()
   const fsPath = useFSRoute()
   const {colorMode} = useColorMode()
   const {activePath, topLevelNavbarItems, docsDirectories, flatDocsDirectories} = useMemo(
@@ -96,7 +97,8 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                   <Breadcrumbs>
                                     {siteTitle && (
                                       <Breadcrumbs.Item
-                                        href={basePath || '/'}
+                                        as={NextLink}
+                                        href="/"
                                         sx={{
                                           color: 'var(--brand-InlineLink-color-rest)',
                                         }}
@@ -107,8 +109,9 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                     {activePath.map((item, index) => {
                                       return (
                                         <Breadcrumbs.Item
+                                          as={NextLink}
                                           key={item.name}
-                                          href={`${basePath}${item.route}`}
+                                          href={item.route}
                                           selected={index === activePath.length - 1}
                                           sx={{
                                             textTransform: 'capitalize',
diff --git a/packages/theme/components/layout/sidebar/Sidebar.tsx b/packages/theme/components/layout/sidebar/Sidebar.tsx
index 42f8f88..ca3c178 100644
--- a/packages/theme/components/layout/sidebar/Sidebar.tsx
+++ b/packages/theme/components/layout/sidebar/Sidebar.tsx
@@ -61,7 +61,6 @@ function getOcticonForType(type?: string): Icon | undefined {
 
 export function Sidebar({pageMap}: SidebarProps) {
   const router = useRouter()
-  const basePath = router.basePath
 
   const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
 
@@ -95,12 +94,7 @@ export function Sidebar({pageMap}: SidebarProps) {
 
           if (item.kind === 'MdxPage') {
             return (
-              <NavList.Item
-                as={NextLink}
-                key={item.name}
-                href={`${basePath}${item.route}`}
-                sx={{textTransform: 'capitalize'}}
-              >
+              <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
                 {item.frontMatter?.title ?? item.name}
               </NavList.Item>
             )
@@ -115,7 +109,7 @@ export function Sidebar({pageMap}: SidebarProps) {
             const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
             if (shouldShowTabs) {
               return (
-                <NavList.Item as={NextLink} key={indexPage.name} href={`${basePath}${indexPage.route}`}>
+                <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
                   {(indexPage as MdxFile).frontMatter?.title || item.name}
                 </NavList.Item>
               )
@@ -137,7 +131,7 @@ export function Sidebar({pageMap}: SidebarProps) {
                           <NavList.Item
                             as={NextLink}
                             key={child.name}
-                            href={`${basePath}${child.route}`}
+                            href={child.route}
                             aria-current={child.route === router.pathname ? 'page' : undefined}
                           >
                             {(child as MdxFile).frontMatter?.title || item.name}
@@ -152,8 +146,8 @@ export function Sidebar({pageMap}: SidebarProps) {
                         return (
                           <NavList.Item
                             as={NextLink}
-                            key={`${(landingPageItem as MdxFile).route}`}
-                            href={`${basePath}${(landingPageItem as MdxFile).route}`}
+                            key={(landingPageItem as MdxFile).route}
+                            href={(landingPageItem as MdxFile).route}
                             sx={{textTransform: 'capitalize'}}
                             aria-current={(landingPageItem as MdxFile).route === router.pathname ? 'page' : undefined}
                           >