CODEWITHSUNDEEP
webpacknext.js
Nithin
Nithin

Reputation: 1477

Render MDX content in Next.js

I am trying to load MDX content in a Next.js application but the content is coming like this instead of the normal view

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!`)); }

My _app.js is like this -

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>
    );
}

My next.config.js is like this

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

I tried following the setup instructions for Webpack by referring here - https://mdxjs.com/getting-started/webpack and here - https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config but the result was still the same, can anyone help me out?

Upvotes: 1

Views: 1554

Answers (1)

Ivan V.
Ivan V.

Reputation: 8081

Looking at the official nextjs mdx example this is the correct configuration:

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

Upvotes: 1

Related Questions