Building a Modern Blog with Next.js and Velite

Introduction

Welcome to my very first blog post! In this article, we'll explore how to build a modern, production-ready blog using some of the most exciting tools in the React ecosystem.

Why Next.js App Router?

The App Router introduced in Next.js 13+ brings several game-changing features:

• React Server Components — render on the server by default for better performance
• Nested Layouts — share UI between routes without re-rendering
• Streaming — progressively render UI from the server
• Built-in SEO — native metadata API for better search engine optimization

What is Velite?

Velite is a modern content SDK that turns your Markdown/MDX files into type-safe data. Think of it as the successor to Contentlayer — actively maintained, fast, and built on Zod.

Key Features

1. Type Safety — Zod-powered schemas validate your frontmatter at build time
2. MDX Support — write JSX directly in your Markdown files
3. Hot Reload — content changes reflect instantly during development
4. Zero Runtime — all processing happens at build time

Code Example

Here's a simple React component that demonstrates the power of TypeScript:

interface BlogPostProps {
  title: string
  excerpt: string
  date: string
}

export function BlogCard({ title, excerpt, date }: BlogPostProps) {
  return (
    <article className="rounded-2xl border p-6 shadow-sm">
      <h2 className="text-xl font-bold">{title}</h2>
      <p className="mt-2 text-gray-600">{excerpt}</p>
      <time className="mt-4 text-sm text-gray-400">{date}</time>
    </article>
  )
}

Getting Started Checklist

• Initialize Next.js with App Router
• Install Velite and configure schemas
• Create your first MDX post
• Build the blog listing page
• Add individual post pages with prose styling
• Deploy to Vercel

Conclusion

Building a blog with Next.js and Velite gives you the best of both worlds: the developer experience of writing in Markdown with the full power of React components.

Pro tip: You can use any React component inside your MDX files — charts, interactive demos, embedded videos — the sky is the limit!

Happy coding! 🚀