MDX and joy of delivering content with modern web

Next.js has made it easy to write content for blog posts, by including JSX components such as interactive embeds, charts, or alerts directly in your markdown content.

Here are some examples of using MDX:

h2 Heading

h3 Heading

h4 Heading

h5 Heading

Emphasis

This is bold text

This is italic text

Blockquotes

If today were the last day of my life, would I want to do what I am about to do today? – Steve Jobs

Links

• Next.js is a good starter for web developers
• pnpm is very popular for package management.

CodeBlocks

// This is commented-out code
export default function HelloWorld() {
  return (
    <h1>Hello, World!</h1>
  );
}

Images

Here, we use Next.js Image in MDX for seamless image rendering:

<Image
  src="/public/photo3.jpg"
  alt="OpenGraph image"
  width={640}
  height={500}
/>

Renders:

Image Grid

This uses a custom image grid component to display image galleries.

<ImageGrid
  columns={3} // Accepts 2, 3, or 4 columns
  images={[
    { src: "/photos/photo1.jpg", alt: "Photo1", href: "#" }, // 'href' is optional
    { src: "/photos/photo2.jpg", alt: "Photo2", href: "#" },
    { src: "/photos/photo3.jpg", alt: "Photo3"},
  ]}
/>

Renders:

Embeds

Tweets

This uses react-tweet to embed tweets in MDX posts.

<StaticTweet id="1617979122625712128" />

Renders:

Andrej Karpathy

@karpathy

·Follow

The hottest new programming language is English

8:14 PM · Jan 24, 2023

38.2K

Reply

Copy link

Read 971 replies

YouTube Videos

This uses react-youtube to embed YouTube videos in MDX posts.

<YouTube videoId="wXhTHyIgQ_U" />

Renders:

Captions

This uses react-wrap-balancer to evenly balance captions in MDX posts.

<Caption>
  Captions that flow smoothly, making your content easy to read and visually
  appealing with a clean look.
</Caption>

Renders:

Tables

This uses a custom table component to render tables in MDX posts.

<Table
  data={{
    headers: ["Title", "Description"],
    rows: [
      [
        "First item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
      [
        "Second item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
    ],
  }}
/>

Renders:

Math Expressions

This allows you to render mathematical expressions in MDX posts using KaTeX . Simply wrap your expression in $ to include KaTeX within your MDX content.

$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$

Renders:

$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$

Callout

This uses a custom callout component to render important information in MDX posts.

<Callout emoji="💡">
This is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.
</Callout>

Renders: