website/apps/docs-v2/app/docs/[[...slug]]/page.tsx

import { source } from "@/lib/source";
import { openapi } from "@/lib/source";
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
import defaultMdxComponents from "fumadocs-ui/mdx";
import {
	DocsBody,
	DocsDescription,
	DocsPage,
	DocsTitle,
} from "fumadocs-ui/page";
import { notFound } from "next/navigation";

export default async function Page(props: {
	params: Promise<{ slug?: string[] }>;
}) {
	const params = await props.params;
	const page = source.getPage(params.slug);
	if (!page) notFound();

	const MDX = page.data.body;

	return (
		<DocsPage toc={page.data.toc} full={page.data.full}>
			<DocsTitle>{page.data.title}</DocsTitle>
			<DocsDescription>{page.data.description}</DocsDescription>
			<DocsBody>
				<MDX
					components={{
						...defaultMdxComponents,
						ImageZoom: (props) => <ImageZoom {...(props as any)} />,
						p: ({ children }) => (
							<p className="text-[#3E4342] dark:text-muted-foreground">
								{children}
							</p>
						),
						li: ({ children, id }) => (
							<li
								{...{ id }}
								className="text-[#3E4342] dark:text-muted-foreground"
							>
								{children}
							</li>
						),
						APIPage: openapi.APIPage,
					}}
				/>
			</DocsBody>
		</DocsPage>
	);
}

export async function generateStaticParams() {
	return source.generateParams();
}

export async function generateMetadata(props: {
	params: Promise<{ slug?: string[] }>;
}) {
	const params = await props.params;
	const page = source.getPage(params.slug);
	if (!page) notFound();

	return {
		title: page.data.title,
		description: page.data.description,
	};
}