Hello 👋

This is MDX rendered statically by Next.js with full image support!
Add more posts under /content/blog/.

Features

• ✅ Static site generation
• ✅ MDX support with custom components
• ✅ Optimized images with Next.js Image
• ✅ SEO optimized
• ✅ Fast and lightweight
• ✅ Automatic captions for images

Image Examples

Local Images with Captions

You can add images from your /public/images/ directory with automatic optimization:

![Alt text](/images/blog/example.jpg "This is an optional caption")

The caption (text after the URL in quotes) will be rendered as a <figcaption> automatically!

Remote/CDN Images

Images from external sources work too (as long as the domain is in next.config.js):

![Placeholder](https://via.placeholder.com/600x400)

Using Next.js Image Component Directly

For more control, you can import and use the Image component:

import Image from 'next/image'

<Image
  src="/images/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  className="rounded-lg"
/>

Getting Started

To add a new blog post with images:

1. Create a new .mdx file in /content/blog/
2. Add your images to /public/images/blog/
3. Reference them using markdown syntax or the Image component
4. Captions are automatically generated from the image title attribute

That's it! Your images will be automatically optimized, lazy-loaded, and responsive.