1

我正在使用MDX和Next.js制作博客，但无法呈现 Markdown 内容。博客文章仅将降价内容显示为string.

这是我的完整源代码 → https://github.com/deadcoder0904/blog-mdx-next/

我有以下文件夹结构：

.
|-- 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

我的所有内容都在posts/文件夹中。

我有 2 个文件夹：blog/&tutorials/

每个帖子都在它们自己的文件夹中blog/或tutorials/。看起来像：

博客档案

我想posts/blog/hello-world/index.mdx在位置呈现我的帖子，blog/hello-world所以我制作了blog/[slug].js文件。

其内容如下：

页面/博客/[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

重要的部分是：

<MDXProvider components={MDXComponents}>{source}</MDXProvider>

我认为这会呈现降价内容，但它只将降价内容显示为string.

您可以通过单击任何博客文章在https://codesandbox.io/s/github/deadcoder0904/blog-mdx-next?file=/pages/blog/%5Bslug%5D.js检查输出。

Hello World当我点击帖子时，它显示以下内容：

你好世界

我如何实际呈现内容？

我查看了其他 Github 存储库，例如Tailwind CSS 博客，它对他们来说效果很好，但我不确定它是如何工作的 :(

我确实知道我必须将source道具转换为 inBlog或mdxin，getStaticProps但我也没有看到Tailwind 这样做。

4

1 回答 1

1

我认为这就是您要寻找的东西https://github.com/vercel/next.js/discussions/13901

您需要安装此软件包npm i next-mdx-remote并对代码进行以下更改：

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import renderToString from 'next-mdx-remote/render-to-string'
import hydrate from 'next-mdx-remote/hydrate'

import { BLOG_PATH, blogFilePaths } from '../../utils/mdxUtils'
import { Image } from '../../components/Image'

const components = { Image }

const Blog = ({ source, frontMatter }) => {
    const content = hydrate(source, { components })

    return (
        <div>
            <h1>{frontMatter.title}</h1>
            {content}
        </div>
    )
}

...

export const getStaticProps = async ({ params }) => {
    const { slug } = params
    const blogFilePath = path.join(BLOG_PATH, `/blog/${slug}/index.mdx`)

    const source = fs.readFileSync(blogFilePath, 'utf-8');
    const { content, data } = matter(source);
    const mdxSource = await renderToString(content, { components });

    if (!blogFilePath) {
        console.warn('No MDX file found for slug')
    }

    return {
        props: {
            source: mdxSource,
            frontMatter: data,
        },
    }
}

export default Blog

但是当你在你的 mdx 文件中引用 assets 时你会遇到一个问题，tailwind 博客通过为 assets 添加一个加载器来解决这个问题，不幸的next-mdx-remote是似乎不支持在 MDX 中导入（或者可能需要特定的配置）所以你会有将您的图像移动到公用文件夹，例如public/blog/Rustin_Cohle.jpg

与顺风博客的不同之处在于您使用的是动态 SSG

此外，还有另一种方法我没有完全测试https://github.com/vercel/next.js/issues/9524#issuecomment-580239600

于 2020-09-24T22:01:49.417 回答