Building a Blog with Next.js 16 and Velite

Why This Stack?

When building a blog in 2026, you have many choices. Here's why I chose this combination:

Setting Up Velite

Velite is a content management system that works at build time:

bun add velite

Create a velite.config.ts:

import { defineConfig, s } from "velite";
 
export default defineConfig({
  collections: {
    posts: {
      name: "Post",
      pattern: "content/posts/**/*.md",
      schema: s.object({
        title: s.string(),
        date: s.isodate(),
        categories: s.array(s.string()).optional(),
        tags: s.array(s.string()).optional(),
        summary: s.string().optional(),
        slug: s.string().optional(),
      }),
    },
  },
});

Data Flow

content/posts/*.md
       │
       ▼
  Velite (build time)
       │
       ├──→ .velite/data/posts.json
       ├──→ .velite/index.d.ts
       │
       ▼
  Next.js SSG → Static HTML

Key Benefits

1. Type Safety: Velite generates TypeScript types from your schema
2. Zero Runtime: Everything is resolved at build time
3. Hot Reload: Velite watches for file changes in development
4. No Database: File system is the single source of truth