Javascript 在下一个js中使用来自`@MDX js/react`的` MDXProvider`时，MDX博客只显示标记内容，而不是呈现它

我正在用&制作博客，但我无法呈现降价内容。这篇博客文章只是将降价内容显示为

string

这是我的完整源代码→

我有以下文件夹结构：

。
|--自述文件
|--组成部分
|`--Image.js
|--next.config.js
|--package-lock.json
|--package.json
|--页数
||--u app.js
||——博客
||`-[slug].js
||--dark.css
||--index.js
|`--new.css
|--职位
||——博客
|| |——你好，世界
|| | |--Rustin|u Cohle.jpg
|| |`--index.mdx
|| `——狗屎世界
||`--index.mdx
|`--教程
|`--控制台登录javascript
|`--index.mdx
|--prettier.config.js
`--乌提尔斯
`--mdxUtils.js

我的所有内容都在

posts/

文件夹中

我有两个文件夹：

blog/

&

tutorials/

每篇文章都在

blog/

或

tutorials/

中各自的文件夹中。它看起来像：

我想在

blog/hello world

位置呈现我的

posts/blog/hello world/index.mdx

帖子，所以我制作了

blog/[slug].js

文件

其内容如下:

pages/blog/[slug].js

从“fs”导入fs
从“路径”导入路径
从“灰质”导入物质
从'@mdx js/react'导入{MDXProvider}
从“../../utils/mdxUtils”导入{BLOG_PATH，blogfilepath}
从“../../components/Image”导入{Image}
常量MDXComponents={Image}
const Blog=（{source，frontMatter}）=>{
返回(
{frontMatter.title}
{source}
)
}
导出异步函数getStaticPaths（）{
constpath=blogfilepath.map（（路径）=>{
常量split=path.split（“/”）
常量slug=split[split.length-2]
返回{
参数：{
鼻涕虫
},
}
})
返回{
路径，
后退：错误，
}
}
export const getStaticProps=async（{params}）=>{
常量{slug}=params
const blogFilePath=path.join（BLOG_path，`/BLOG/${slug}/index.mdx`）
const source=fs.readFileSync（blogFilePath）
const{content:mdx，data}=matter（源）
如果（！blogFilePath）{
console.warn（'找不到slug的MDX文件'）
}
返回{
道具：{
资料来源：mdx，
前沿：数据，
},
}
}
导出默认博客

重要的部分是：

{source}

我原以为这会呈现标记内容，但它只将标记内容显示为

字符串

您可以通过单击任何博客帖子来检查上的输出

当我单击“Hello World”post时，它会显示以下内容：

如何实际呈现内容

我查看了其他Github回购协议，如&它是有效的，但我不确定它是如何工作的：(

---

我知道我必须转换

博客中的
源代码
道具或
getStaticProps中的
mdx
，但我也必须转换。我想这就是你要找的

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

从“fs”导入fs
从“路径”导入路径
从“灰质”导入物质
从“下一个mdx远程/渲染到字符串”导入renderToString
从“下一个mdx远程/水合物”导入水合物
从“../../utils/mdxUtils”导入{BLOG_PATH，blogfilepath}
从“../../components/Image”导入{Image}
常量组件={Image}
const Blog=（{source，frontMatter}）=>{
常量含量=水合物（来源，{components}）
返回(
{frontMatter.title}
{content}
)
}
...
export const getStaticProps=async（{params}）=>{
常量{slug}=params
const blogFilePath=path.join（BLOG_path，`/BLOG/${slug}/index.mdx`）
constsource=fs.readFileSync（blogFilePath，'utf-8'）；
const{content，data}=物质（来源）；
const mdxSource=await renderToString（内容，{components}）；
如果（！blogFilePath）{
console.warn（'找不到slug的MDX文件'）
}
返回{
道具：{
资料来源：mdxSource，
前沿：数据，
},
}
}
导出默认博客

但是，当引用mdx文件中的资产时，您会遇到一个问题，tailwind博客解决了这个问题，不幸的是，
next mdx remote
似乎不支持在mdx中导入（或者可能需要特定的配置），因此您必须将图像移动到，类似于
public/blog/Rustin_Cohle.jpg

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

另外，还有另一种方法，我没有完全测试
我已经在使用
next mdx remote
，但我想把图像放在与帖子相同的文件夹中，所以我切换到了这个方法。该库的作者说这不是一个可解决的问题，因为
next mdx remote
将标记内容视为数据&而不是完全通过
webpack
。虽然您没有完全测试的另一种方法非常有效，但还是要感谢您：）嘿@deadcoder0904-您是否能够使用未经测试的方法在MDX内部获得导入？我得到“不能在模块外使用import语句”。@T_Conroy是的，未经测试的方法工作得很好。但是，我从下一个mdx remote切换到了
。我克隆了顺风回购协议→  & 对它做了一些更改并使用了它。这是我目前的新方法。