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