Custom Component In MDX and Nextjs

A guide to create reusable components

April 6, 2024 (1mo ago) | πŸ“– 1 min read



If you want to used Github Flavoured Markdown install remark-gfm

npm install remark-gfm

Custom Component guide

Here is my MDX file for Component mdx.tsx

You can refer Lee Robinson's file as well as Max Leiter's file for more components.


<img className='mx-auto rounded border border-zinc-600 shadow hover:border-black' src='' alt='GitHub Logo' width={400} height={400} />
GitHub Logo


//just like Link in Next js <Link href="/">Home</Link> // Just like a tag <Link href="">GitHub</Link>

Syntax highlighting

In MDX you can do highlighting with sugar-high . It support Server Component by default.

```jsx function log({ title }) { if (title) { console.log('title', title); } } ```

Simple function

function log({ title }) { if (title) { console.log('title', title); } }