I'm currently in the process of setting up a blog using MDX and Next.js, but I've encountered an issue with rendering Markdown content. The blog post seems to only display the markdown content as plain text instead of rendering it properly.
If you'd like to take a look at my full source code, you can find it here → https://github.com/deadcoder0904/blog-mdx-next/
Here is an overview of my folder structure:
|-- README.md
|-- components
| `-- Image.js
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- pages
| |-- _app.js
| |-- blog
| | `-- [slug].js
| |-- dark.css
| |-- index.js
| `-- new.css
|-- posts
| |-- blog
| | |-- hello-world
| | | |-- Rustin_Cohle.jpg
| | | `-- index.mdx
| | `-- shit-world
| | `-- index.mdx
| `-- tutorials
| `-- console-log-in-javascript
| `-- index.mdx
|-- prettier.config.js
`-- utils
`-- mdxUtils.js
All my content is stored within the posts/ folder with two subfolders: blog/ and tutorials/
Each individual post is located in its own folder inside either blog/ or tutorials/. Here is an example:
https://i.stack.imgur.com/2X5bE.png
I want my posts/blog/hello-world/index.mdx post to be rendered at the URL blog/hello-world. To achieve this, I created a blog/[slug].js file.
The contents of this file are as follows:
pages/blog/[slug].js
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { MDXProvider } from '@mdx-js/react'
import { BLOG_PATH, blogFilePaths } from '../../utils/mdxUtils'
import { Image } from '../../components/Image'
const MDXComponents = { Image }
const Blog = ({ source, frontMatter }) => {
return (
<div>
<h1>{frontMatter.title}</h1>
<MDXProvider components={MDXComponents}>{source}</MDXProvider>
</div>
)
}
export async function getStaticPaths() {
const paths = blogFilePaths.map((path) => {
const split = path.split('/')
const slug = split[split.length - 2]
return {
params: {
slug,
},
}
})
return {
paths,
fallback: false,
}
}
export const getStaticProps = async ({ params }) => {
const { slug } = params
const blogFilePath = path.join(BLOG_PATH, `/blog/${slug}/index.mdx`)
const source = fs.readFileSync(blogFilePath)
const { content: mdx, data } = matter(source)
if (!blogFilePath) {
console.warn('No MDX file found for slug')
}
return {
props: {
source: mdx,
frontMatter: data,
},
}
}
export default Blog
The crucial part of this code snippet is:
<MDXProvider components={MDXComponents}>{source}</MDXProvider>
Although I expected this to render the markdown content, it appears to only display it as plain text. To see this behavior in action, you can check out the output on this link by clicking on any blog post.
When I click on the "Hello World" post, the following is displayed:
https://i.stack.imgur.com/E2BJc.png
How can I actually render the markdown content correctly?
I have looked at other repositories such as the Tailwind CSS Blog and it seems to work perfectly for them. Unfortunately, I am unsure about the specifics of how it works. What I do know is that I need to convert the source prop in the Blog component or the mdx variable in getStaticProps, but I couldn't identify this step in the Tailwind codebase either.