diff --git a/apps/docs/lib/mdx/generateRefMarkdown.tsx b/apps/docs/lib/mdx/generateRefMarkdown.tsx
index 1d5f7a539e9..5d959560ade 100644
--- a/apps/docs/lib/mdx/generateRefMarkdown.tsx
+++ b/apps/docs/lib/mdx/generateRefMarkdown.tsx
@@ -2,12 +2,9 @@ import fs from 'fs'
 
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
+import { ICommonMarkdown } from '~/components/reference/Reference.types'
 
-// import { remarkCodeHike } from '@code-hike/mdx'
-// import codeHikeTheme from '~/codeHikeTheme.js'
-// import theme from 'shiki/themes/solarized-dark.json'
-
-async function generateRefMarkdown(sections, slug) {
+async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
   let markdownContent = []
   /**
    * Read all the markdown files that might have
@@ -16,10 +13,8 @@ async function generateRefMarkdown(sections, slug) {
    *  - important notes regarding implementation
    */
   await Promise.all(
-    sections.map(async (x, i) => {
-      if (!x.id) return null
-
-      const pathName = `docs/ref${slug}/${x.id}.mdx`
+    sections.map(async (section) => {
+      const pathName = `docs/ref${slug}/${section.id}.mdx`
 
       function checkFileExists(x) {
         if (fs.existsSync(x)) {
@@ -37,8 +32,8 @@ async function generateRefMarkdown(sections, slug) {
       const { data, content } = matter(fileContents)
 
       markdownContent.push({
-        id: x.id,
-        title: x.title,
+        id: section.id,
+        title: section.title,
         meta: data,
         // introPage: introPages.includes(x),
         content: content
diff --git a/apps/docs/lib/mdx/handleRefStaticPaths.tsx b/apps/docs/lib/mdx/handleRefStaticPaths.tsx
index c1f13e4a8c4..ae7aeb1e3b4 100644
--- a/apps/docs/lib/mdx/handleRefStaticPaths.tsx
+++ b/apps/docs/lib/mdx/handleRefStaticPaths.tsx
@@ -1,13 +1,14 @@
-import { getAllDocs } from '../docs'
-
-async function handleRefGetStaticPaths() {
-  let docs = getAllDocs()
+import { ICommonSection } from '~/components/reference/Reference.types'
 
+async function handleRefGetStaticPaths(sections: ICommonSection[], libraryPath: string) {
   return {
-    paths: docs.map(() => {
+    paths: sections.map((section) => {
       return {
         params: {
-          slug: docs.map((d) => d.slug),
+          slug: libraryPath
+            .split('/')
+            .filter((dir) => !!dir)
+            .concat(section.slug),
         },
       }
     }),
diff --git a/apps/docs/lib/mdx/handleRefStaticProps.tsx b/apps/docs/lib/mdx/handleRefStaticProps.tsx
index c97245387f9..56c6c159ed0 100644
--- a/apps/docs/lib/mdx/handleRefStaticProps.tsx
+++ b/apps/docs/lib/mdx/handleRefStaticProps.tsx
@@ -1,7 +1,11 @@
+import { ICommonMarkdown, ICommonSection } from '~/components/reference/Reference.types'
 import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown'
 
-async function handleRefStaticProps(sections, librarypath) {
-  let markdownContent = await generateRefMarkdown(sections, librarypath)
+async function handleRefStaticProps(sections: ICommonSection[], libraryPath: string) {
+  const markdownSections = sections.filter(
+    (section): section is ICommonMarkdown => section.type === 'markdown'
+  )
+  const markdownContent = await generateRefMarkdown(markdownSections, libraryPath)
 
   return {
     props: {
diff --git a/apps/docs/pages/reference/api/[...slug].tsx b/apps/docs/pages/reference/api/[...slug].tsx
index 382c882a190..ca4c7128256 100644
--- a/apps/docs/pages/reference/api/[...slug].tsx
+++ b/apps/docs/pages/reference/api/[...slug].tsx
@@ -8,17 +8,17 @@ import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 // @ts-ignore
 const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
 const sections = flattenSections(apiCommonSections)
+const libraryPath = '/api'
 
 export default function Config(props) {
   return <RefSectionHandler sections={sections} spec={generatedSpec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/api')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/cli/[...slug].tsx b/apps/docs/pages/reference/cli/[...slug].tsx
index 5af245300ef..1fe46fa04a9 100644
--- a/apps/docs/pages/reference/cli/[...slug].tsx
+++ b/apps/docs/pages/reference/cli/[...slug].tsx
@@ -8,15 +8,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(cliCommonSections)
+const libraryPath = '/cli'
 
 export default function CliRef(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="cli" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/cli')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/csharp/[...slug].tsx b/apps/docs/pages/reference/csharp/[...slug].tsx
index 17b26f498a4..c3ba488e1b1 100644
--- a/apps/docs/pages/reference/csharp/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx b/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
index f94729d7482..fc03fefa015 100644
--- a/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
@@ -9,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -35,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/csharp/v0/[...slug].tsx b/apps/docs/pages/reference/csharp/v0/[...slug].tsx
index 92e4d0a5b9c..f8a6e985d1e 100644
--- a/apps/docs/pages/reference/csharp/v0/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/v0/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp/v0'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
index d4c26ddf9dd..18ee28ca14f 100644
--- a/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp/v0'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -34,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/dart/[...slug].tsx b/apps/docs/pages/reference/dart/[...slug].tsx
index 6cd14595a69..b452d04d84f 100644
--- a/apps/docs/pages/reference/dart/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
index 54aef81d9c1..29a9f880840 100644
--- a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
@@ -9,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.slug === slug)
@@ -35,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/dart/v0/[...slug].tsx b/apps/docs/pages/reference/dart/v0/[...slug].tsx
index 455b8cdfbe5..b30b791db60 100644
--- a/apps/docs/pages/reference/dart/v0/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v0/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart/v0'
 
 export default function JSReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
index 459912b8b35..1c2949b24a7 100644
--- a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
@@ -9,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart/v0'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.slug === slug)
@@ -34,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx
index 244fe6c28ae..24b8a0011ed 100644
--- a/apps/docs/pages/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/[...slug].tsx
@@ -1,3 +1,4 @@
+import { inspect } from 'util'
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
 import spec from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
@@ -7,6 +8,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   return (
@@ -21,9 +23,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
index 34c4ee78943..658469669d1 100644
--- a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -35,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/javascript/v1/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/[...slug].tsx
index e7a5b4bf8d1..364b3e667ac 100644
--- a/apps/docs/pages/reference/javascript/v1/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/[...slug].tsx
@@ -1,3 +1,4 @@
+import { inspect } from 'util'
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v1/combined.json'
 import spec from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
@@ -7,6 +8,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   return (
@@ -21,9 +23,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript/v1')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
index 64a6816669d..d040ffa7ec5 100644
--- a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
@@ -7,7 +7,9 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -34,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript/v1')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/python/[...slug].tsx b/apps/docs/pages/reference/python/[...slug].tsx
index d0b6ae951dd..3da995dd993 100644
--- a/apps/docs/pages/reference/python/[...slug].tsx
+++ b/apps/docs/pages/reference/python/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/python'
 
 export default function PyReference(props) {
   return (
@@ -21,9 +22,9 @@ export default function PyReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/python')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/python/crawlers/[...slug].tsx b/apps/docs/pages/reference/python/crawlers/[...slug].tsx
index 0ccb2c18cce..ca70d55716f 100644
--- a/apps/docs/pages/reference/python/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/python/crawlers/[...slug].tsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/python'
 
 export default function PyReference(props) {
   const router = useRouter()
@@ -35,9 +36,9 @@ export default function PyReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/python')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx b/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
index 5f78d5830ff..46827290444 100644
--- a/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingAnalyticsCommonSections)
+const libraryPath = '/self-hosting-analytics'
 
 // @ts-ignore
 const spec = gen_v3(analyticsSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostAnalyticsReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-analytics')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx b/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
index c7b2382af16..27e8a909182 100644
--- a/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingAuthCommonSections)
+const libraryPath = '/self-hosting-auth'
 
 // @ts-ignore
 const spec = gen_v3(authSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostAuthReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-auth')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx b/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
index cf4639365fb..5d01436b310 100644
--- a/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
@@ -7,15 +7,16 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingFunctionsCommonSections)
+const libraryPath = '/self-hosting-functions'
 
-export default function JSReference(props) {
+export default function SelfHostFunctionsReference(props) {
   return <RefSectionHandler sections={sections} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-functions')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx b/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
index 49e91894a06..c5039628929 100644
--- a/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
@@ -4,18 +4,18 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
-import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingRealtimeCommonSections)
+const libraryPath = '/self-hosting-realtime'
 
-export default function JSReference(props) {
+export default function SelfHostRealtimeReference(props) {
   return <RefSectionHandler sections={sections} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-realtime')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx b/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
index 1b4b99fb9c8..7e55171583e 100644
--- a/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingStorageCommonSections)
+const libraryPath = '/self-hosting-storage'
 
 // @ts-ignore
 const spec = gen_v3(storageSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostStorageReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-storage')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/swift/[...slug].tsx b/apps/docs/pages/reference/swift/[...slug].tsx
index dd1ffb3354e..22cb67c6f98 100644
--- a/apps/docs/pages/reference/swift/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/swift/crawlers/[...slug].tsx b/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
index 644925aeac4..f88e25b8997 100644
--- a/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
@@ -9,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -35,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/swift/v0/[...slug].tsx b/apps/docs/pages/reference/swift/v0/[...slug].tsx
index 3e2e253dc6a..cdf3662f63b 100644
--- a/apps/docs/pages/reference/swift/v0/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/v0/[...slug].tsx
@@ -6,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift/v0'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }
diff --git a/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx
index 099dfb582a8..bf3bc4bc449 100644
--- a/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx
@@ -9,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift/v0'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -34,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }