Welcome to Our Blog

Q: How do I add new blog posts?

Create a new .mdx file in the content/blog directory with the required frontmatter. The build process will automatically compile and include it in your site.

This is our first blog post written in MDX. MDX allows us to use React components directly in our markdown content, making it perfect for creating rich, interactive documentation and blog posts.

What is MDX?

MDX is a format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

Key Features

Type-safe frontmatter with Effect Schema validation
Hot reload in development
Static generation for optimal performance
SEO optimized with automatic metadata

Technology Stack

Built with Next.js 16, React 19, Velite, and Tailwind CSS. The content layer provides type-safe frontmatter validation and automatic MDX compilation.

Code Examples

You can include code blocks with syntax highlighting:

import { getAllPosts } from "~/lib/blog";
 
const posts = getAllPosts();
console.log(`Found ${posts.length} posts`);

Example Table

Feature	Status	Notes
MDX Support	✅	Full JSX in Markdown
Type Safety	✅	Effect Schema validated frontmatter
Hot Reload	✅	Fast development cycle
Static Gen	✅	Optimal performance
SEO	✅	Automatic metadata

Here's another example with JavaScript:

function greet(name) {
  return `Hello, ${name}!`;
}
 
console.log(greet("World"));

FAQ

What is MDX and why use it for blogging?

MDX combines Markdown with JSX, allowing you to embed React components directly in your blog posts. This enables richer, interactive content while keeping the simplicity of Markdown.

How does the frontmatter validation work?

We use schema-based type-safe validation of frontmatter fields like title, date, and tags. This ensures consistency and catches errors early in development.

Can I include custom components in my posts?

Yes! Import and use any React components from your module. For example, you can add interactive elements like charts or alerts to enhance your content.

Is the blog SEO-friendly?

Absolutely. The system automatically generates metadata, including Open Graph tags, for optimal search engine visibility and social sharing.

Here is an example:

function greet(name) {
  return `Hello, ${name}!`;
}
 
console.log(greet("World"));

How do I add new blog posts?

Create a new .mdx file in the content/blog directory with the required frontmatter. The build process will automatically compile and include it in your site.

What's Next?

Stay tuned for more posts about:

Building with Next.js App Router
Creating reusable UI components
Optimizing web performance
And much more!

Thanks for reading our first post. We're excited to share more content with you soon!