components/MDXComponents.js

@@ -1,11 +1,20 @@
+import { MDXRemote } from 'next-mdx-remote'
 import Image from 'next/image'
 import CustomLink from './Link'
 import Pre from './Pre'
 
-const MDXComponents = {
+export const MDXComponents = {
   Image,
   a: CustomLink,
   pre: Pre,
 }
 
-export default MDXComponents
+export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
+  const LayoutComponent = require(`../layouts/${layout}`).default
+
+  return (
+    <LayoutComponent {...rest}>
+      <MDXRemote {...mdxSource} components={MDXComponents} />
+    </LayoutComponent>
+  )
+}

lib/mdx.js

@@ -1,4 +1,4 @@
-import MDXComponents from '@/components/MDXComponents'
+import { MDXComponents } from '@/components/MDXComponents'
 import fs from 'fs'
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'

pages/_app.js

@@ -7,7 +7,7 @@ import Head from 'next/head'
 
 import { SEO } from '@/components/SEO'
 import LayoutWrapper from '@/components/LayoutWrapper'
-import MDXComponents from '@/components/MDXComponents'
+import { MDXComponents } from '@/components/MDXComponents'
 
 export default function App({ Component, pageProps }) {
   return (

pages/about.js

@@ -1,5 +1,5 @@
 import { MDXRemote } from 'next-mdx-remote'
-import MDXComponents from '@/components/MDXComponents'
+import { MDXComponents } from '@/components/MDXComponents'
 import AuthorLayout from '@/layouts/AuthorLayout'
 import { getFileBySlug } from '@/lib/mdx'
 

pages/blog/[...slug].js

@@ -1,9 +1,7 @@
 import fs from 'fs'
-import { MDXRemote } from 'next-mdx-remote'
-import MDXComponents from '@/components/MDXComponents'
 import PageTitle from '@/components/PageTitle'
-import PostLayout from '@/layouts/PostLayout'
 import generateRss from '@/lib/generate-rss'
+import { MDXLayoutRenderer } from '@/components/MDXComponents'
 import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
 
 export async function getStaticPaths() {
@@ -44,9 +42,14 @@ export default function Blog({ post, authorDetails, prev, next }) {
   return (
     <>
       {frontMatter.draft !== true ? (
-        <PostLayout frontMatter={frontMatter} authorDetails={authorDetails} prev={prev} next={next}>
-          <MDXRemote {...mdxSource} components={MDXComponents} />
-        </PostLayout>
+        <MDXLayoutRenderer
+          layout={frontMatter.layout || 'PostLayout'}
+          mdxSource={mdxSource}
+          frontMatter={frontMatter}
+          authorDetails={authorDetails}
+          prev={prev}
+          next={next}
+        />
       ) : (
         <div className="mt-24 text-center">
           <PageTitle>