fix mdx

web3index · May 2, 2021 · 632a942 · 632a942 · vercel · May 2, 2021
1 parent 1c273ed
commit 632a942
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/hooks/useMdx.tsx b/hooks/useMdx.tsx
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -12,7 +12,8 @@ import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
 import seo from "../../next-seo.config";
 import { getContent, getFile, getFileData, getSlugs } from "../../lib/mdx";
-import { useMDX } from "../../hooks/useMdx";
+import hydrate from "next-mdx-remote/hydrate";
+import MDXComponents from "../../components/MDXComponents";
 
 const StyledButton = styled(Button, {
   border: "1px solid",
@@ -30,12 +31,15 @@ const StyledButton = styled(Button, {
 const Post = ({ slug, content, data, projects }) => {
   const router = useRouter();
   const { isFallback } = router;
-  const mdx = useMDX(content);
 
   if (isFallback) {
     return <Layout data={{ projects }}>Loading</Layout>;
   }
 
+  const mdx = hydrate(content, {
+    components: MDXComponents,
+  });
+
   const nextSeo = {
     ...seo,
     title: `The Web3 Index - ${data.seoTitle}`,