Hello World — Getting Started with Next.js and MDX

Getting Started

Welcome to your first post! This blog is powered by Next.js App Router and rendered entirely with React Server Components — zero client-side JavaScript for the content itself.

Every page is statically generated at build time, which means your readers get instant load times and search engines see fully rendered HTML.

Why MDX?

MDX lets you write standard Markdown while embedding JSX components when you need richer interactivity. You get the best of both worlds:

• The simplicity of Markdown for everyday writing
• The power of React components when you need them
• Full support for GitHub Flavored Markdown (tables, task lists, strikethrough)

Code Example

Here's a simple utility function written in TypeScript:

interface Post {
  slug: string;
  title: string;
  date: string;
  description: string;
  tags?: string[];
}
 
function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}
 
// Usage
const post: Post = {
  slug: "hello-world",
  title: "Hello World",
  date: "2026-04-10",
  description: "My first blog post",
  tags: ["Next.js", "MDX"],
};
 
console.log(formatDate(post.date)); // "April 10, 2026"

Feature Comparison

What's Next?

Now that you have the basics down, try creating your own post by adding a new .md or .mdx file inside the content/posts/ directory. Each file just needs a frontmatter block at the top with title, date, description, and optionally tags.

Happy writing! 🚀