The Content & Documentation SDK for React
- Author type-safe content
- Generate type documentation
- Preview source code
- And so much more
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 /> }