reactjs MDX博客只显示markdown内容,而不是在Next JS中使用`@mdx-js/react`中的`MDXProvider`来渲染它

svujldwt  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(108)

我正在用MDXNext.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/中各自的文件夹中。它看起来像:
x1c 0d1x的数据
我想渲染我的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 post时,它会显示以下内容:


的数据
我如何实际呈现内容?
我看了其他的Github Repos,比如X1 E4 F1 X &它可以用X1 E5 F1 X,但我不确定它是如何工作的,很遗憾:(
我确实知道我必须将source prop 转换为Blogmdx prop 转换为getStaticProps,但我也没有看到Tailwind这样做。

wfsdck30

wfsdck301#

我想这就是你要找的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文件中的资产时,您会遇到问题,tailwind博客通过adding a loader for assets解决了这个问题,不幸的是,next-mdx-remote似乎不支持MDX内部的导入(或者可能需要特定的配置),所以您必须将图像移动到the public folder,类似于public/blog/Rustin_Cohle.jpg
与tailwind博客的不同之处在于,您使用的是Dynamic SSG
此外,还有一种我没有完全测试过的方法https://github.com/vercel/next.js/issues/9524#issuecomment-580239600

taor4pac

taor4pac2#

我是NextJS的初学者,我遇到了这个问题。
在我的例子中,我所有的.mdx文件都是本地的,它们的数据都是用getStaticProps加载的。
如果其他人遇到这个问题,遵循这个指南为我解决了这个问题(**免责声明:**它涉及使用“dangerouslySetInnerHTML”):https://nextjs.org/learn/basics/dynamic-routes/render-markdown

相关问题