在 Next.js 中渲染 MDX 内容答案

【问题标题】：Render MDX content in Next.js在 Next.js 中渲染 MDX 内容
【发布时间】：2020-12-25 13:49:28
【问题描述】：

我正在尝试在 Next.js 应用程序中加载 MDX 内容，但内容是这样出现的，而不是普通视图

function MDXContent(_ref) { let { components } = _ref, props = _objectWithoutProperties(_ref, ["components"]); return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__["mdx"])(MDXLayout, _extends({}, layoutProps, props, { components: components, mdxType: "MDXLayout", __self: this, __source: { fileName: _jsxFileName, lineNumber: 17, columnNumber: 10 } }), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__["mdx"])("h1", { __self: this, __source: { fileName: _jsxFileName, lineNumber: 18, columnNumber: 5 } }, `Hello from MD!`)); }

我的_app.js是这样的-

import Head from 'next/head';
import { MDXProvider } from '@mdx-js/react';

export default function App({ Component, pageProps }) {
    return (
        <MDXProvider>
            <Head>
                <link
                    href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
                    rel="stylesheet"
                />
            </Head>
            <Component {...pageProps} />
        </MDXProvider>
    );
}

我的next.config.js是这样的

const withMDX = require('@next/mdx')({
    options: {
        remarkPlugins: [images],
        rehypePlugins: []
    }
});
module.exports = withMDX();

我尝试按照 Webpack 的设置说明进行操作，参考此处 - https://mdxjs.com/getting-started/webpack 和此处 - https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config，但结果仍然相同，谁能帮帮我？

【问题讨论】：

错误出现在哪里？
在必须显示内容的主页上
您能否提供带有最少代码的 repo 以重现该问题？

标签： webpack next.js

【解决方案1】：

查看official nextjs mdx example这是正确的配置：

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
})

【讨论】：