contentlayerdev · achntj · Apr 29, 2022 · Apr 29, 2022 · Apr 29, 2022 · Apr 29, 2022
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,7 @@ node_modules
 dist
 .next
 .contentlayer
-yarn.lock
 .DS_Store
+.next
+
+.vercel
diff --git a/components/Form.tsx b/components/Form.tsx
@@ -0,0 +1,12 @@
+export default function Form() {
+  return (
+    <>
+      <form className="border-2 border-slate-500 p-2 flex flex-col space-y-5 rounded">
+      <label>Enter your name:</label>
+        <input type="text" placeholder="John Doe" />
+      <label>Enter your age:</label>
+        <input type="text" placeholder="24" />
+    </form>
+    </>
+  );
+}
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -2,7 +2,8 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
 const Post = defineDocumentType(() => ({
   name: 'Post',
-  filePathPattern: `**/*.md`,
+  filePathPattern: `**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: {
       type: 'string',

diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,5 @@
 const { withContentlayer } = require("next-contentlayer");
 
-module.exports = withContentlayer({});
+module.exports = withContentlayer({
+  swcMinify: true,
+});
diff --git a/package.json b/package.json
@@ -11,11 +11,11 @@
     "contentlayer": "latest",
     "next": "12.1.5",
     "next-contentlayer": "latest",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
-    "@types/react": "18.0.4",
+    "@types/react": "^18.0.8",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.24",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,13 @@
 import Link from "next/link";
 import { compareDesc, format, parseISO } from "date-fns";
 import { allPosts, Post } from "contentlayer/generated";
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import Form from "../components/Form"
+
+// Const that passes custom components to all MDX files in the posts directory
+const MDXcomponents = {
+  Form,
+};
 
 export async function getStaticProps() {
   const posts: Post[] = allPosts.sort((a, b) => {
@@ -10,6 +17,9 @@ export async function getStaticProps() {
 }
 
 function PostCard(post: Post) {
+  // Rendering MDX
+  const MDXComponent = useMDXComponent(post.body.code)
+  //
   return (
     <div className="mb-8">
       <h2 className="text-xl">
@@ -20,10 +30,10 @@ function PostCard(post: Post) {
       <time dateTime={post.date} className="block text-xs text-gray-600 mb-2">
         {format(parseISO(post.date), "LLLL d, yyyy")}
       </time>
-      <div
-        className="text-sm"
-        dangerouslySetInnerHTML={{ __html: post.body.html }}
-      />
+      {/* Switch from MD to MDX */}
+        {/* <div dangerouslySetInnerHTML={{ __html: post.body.html }} /> */}
+        <MDXComponent components={MDXcomponents}/>
+        {/*  */}
     </div>
   );
 }

diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -1,6 +1,13 @@
 import Head from "next/head";
 import { format, parseISO } from "date-fns";
 import { allPosts, Post } from "contentlayer/generated";
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import Form from "../../components/Form"
+
+// Const that passes custom components to all MDX files in the posts directory
+const MDXcomponents = {
+  Form,
+};
 
 export async function getStaticPaths() {
   const paths: string[] = allPosts.map((post) => post.url);
@@ -22,6 +29,9 @@ export async function getStaticProps({ params }) {
 }
 
 const PostLayout = ({ post }: { post: Post }) => {
+  // Rendering MDX
+  const MDXComponent = useMDXComponent(post.body.code)
+  //
   return (
     <>
       <Head>
@@ -34,7 +44,12 @@ const PostLayout = ({ post }: { post: Post }) => {
           </time>
           <h1>{post.title}</h1>
         </div>
-        <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+
+        {/* Switch from MD to MDX */}
+        {/* <div dangerouslySetInnerHTML={{ __html: post.body.html }} /> */}
+        <MDXComponent components={MDXcomponents}/>
+        {/*  */}
+
       </article>
     </>
   );

diff --git a/posts/change-me.md → posts/change-me.mdx b/posts/change-me.md → posts/change-me.mdx
diff --git a/posts/click-me.md → posts/click-me.mdx b/posts/click-me.md → posts/click-me.mdx
diff --git a/posts/react-components.mdx b/posts/react-components.mdx
@@ -0,0 +1,8 @@
+---
+title: Using Custom Components with MDX
+date: 2022-04-29
+---
+
+By adding Components to the `pages/posts/[slug].tsx` file, you can use them across all your MDX files. As an example, we have added a simple Form component to this file.
+
+<Form />
diff --git a/posts/what-is-contentlayer.md → posts/what-is-contentlayer.mdx b/posts/what-is-contentlayer.md → posts/what-is-contentlayer.mdx