Creé una página de detalles del blog en NextJS, donde el contenido del blog está rebajado.
import { serialize } from "next-mdx-remote/serialize"; import { MDXRemote } from "next-mdx-remote"; const PostDetails = ({ post, source }) => { const router = useRouter(); if (router.isFallback) { return <Loader />; } return ( <> <Head> <title>Basir - Blogs</title> </Head> <div className="container mx-auto px-4 lg:px-6 my-24"> <div className="max-w-4xl px-4 lg:px-8 mx-auto"> <PostDetail post={post} /> <div className="prose"> <MDXRemote {...source} /> </div> </div> </div> </> ); }; export default PostDetails; export async function getStaticProps({ params }) { const data = await getPostDetails(params.slug); const mdxSource = await serialize(data.content); return { props: { post: data, source: mdxSource }, }; } export async function getStaticPaths() { const posts = await getPosts(); return { paths: posts.map(({ node: { slug } }) => ({ params: { slug } })), fallback: true, }; }¿Cómo creo una tabla de contenido para la página de detalles del blog anterior con enlaces en los que se puede hacer clic que lleva al usuario al encabezado del blog respectivo?