Search code examples
htmlreactjsnext.jsmdxjs

Custom component in starting of mdx file in next js project not following indentation

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

Solution

  • 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