The Content & Documentation SDK for React

docs

data.ts

import { createSource } from 'mdxts'

export const allDocs = createSource('docs/*.mdx')

Sidebar.tsx

import Link from 'next/link'
import { Navigation } from 'mdxts/components'
import { allDocs } from './data'

export function Sidebar() {
  return (
    <Navigation
      source={allDocs}
      renderList={props => (
        <ul>
          {props.children}
        </ul>
      )}
      renderItem={props => (
        <li key={props.label}>
          {props.depth === 0 ? (
            <div>{props.label}</div>
          ) : (
            <Link href={props.pathname}>{props.label}</Link>
          )}
          {props.children}
        </li>
      )}
    />
  )
}

docs/[slug]/page.tsx

import { allDocs } from '../../data'

export default async function Page({ params }) {
  const { Content } = await allDocs.get(params.slug)
  return Content ? <Content /> : null
}