0

I have nextjs project with below versions

"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/mdx": "^12.1.6",
"next": "^12.1.6",

I have one react component and using it in .mdx file with some text as below

<CustomReactComponent/>, you can.... but in output text not coming under <p> tag and not following proper indentation. enter image description here enter image description here

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
Avani Bataviya
  • 750
  • 1
  • 6
  • 20

1 Answers1

2

Update next-mdx-remote package to latest version "next-mdx-remote": "^4.2.0" and add this to mdx options in serialize function of remote-mdx

import remarkslug from 'remark-slug';
import remarkAutolinkHeadings from 'remark-autolink-headings';
import remarkCodeTitles from 'remark-code-titles';
import remarkGfm from 'remark-gfm';

        const mdxSource = await serialize(content, {
        mdxOptions: {
          remarkPlugins: [
            remarkGfm,
            remarkslug,
            [
              remarkAutolinkHeadings,
              {
                linkProperties: {
                  className: ['anchor']
                }
              }
            ],
            remarkCodeTitles
          ]
        }
      });

Now it will wrap your text beside any custom component to p tag automatically

Jenis Gadhiya
  • 36
  • 1