-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
02.rendering.mdx
42 lines (31 loc) · 1.45 KB
/
02.rendering.mdx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
export const metadata = {
title: 'Rendering Examples',
label: 'Rendering',
}
Examples can be rendered using the router of your preferred Server Component framework. This guide will show you how to render examples using Next.js, but the same principles can be applied to other frameworks.
## Templating
Each framework should have a concept of templating and routing. To render examples, query the metadata collected from `createSource`. Using Next.js as an example framework, we can create a custom page that will render the example based on the name of the example file:
{/* TODO: Use real example from site here <CodeBlock source="../../app/(examples)/components/[component]/examples/[example]/page.tsx" baseDirectory="../../app/(examples)" /> */}
```tsx filename="components/[component]/examples/[example]/page.tsx"
import { notFound } from 'next/navigation'
import { createSource } from 'mdxts'
const allComponents = createSource('components/**/*.tsx')
export const dynamic = 'force-static'
export async function generateStaticParams() {
return (await allComponents.examplePaths()).map((pathname) => ({
example: pathname,
}))
}
export default async function Page({
params,
}: {
params: { example: string[] }
}) {
const singlePackage = await allComponents.get(params.example.slice(0, -1))
const example = await allComponents.getExample(params.example)
if (!singlePackage || !example) {
return notFound()
}
return <example.moduleExport />
}
```