Contentlayer vs Velite vs next-mdx-remote 2026

// app/blog/[slug]/page.tsx
import { MDXRemote } from "next-mdx-remote/rsc"
import { readFile } from "fs/promises"
import path from "path"
import matter from "gray-matter"

interface Props {
  params: { slug: string }
}

export default async function BlogPost({ params }: Props) {
  // Read MDX file from filesystem:
  const filePath = path.join(process.cwd(), "content/blog", `${params.slug}.mdx`)
  const source = await readFile(filePath, "utf-8")

  // Parse frontmatter:
  const { content, data: frontmatter } = matter(source)

  return (
    <article>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.description}</p>
      <time>{frontmatter.date}</time>

      {/* Renders MDX in RSC — no client-side JS needed: */}
      <MDXRemote
        source={content}
        components={{
          // Override default HTML elements:
          h2: ({ children }) => <h2 className="text-2xl font-bold mt-8">{children}</h2>,
          code: ({ children }) => <code className="bg-zinc-800 px-1 rounded">{children}</code>,
          // Custom MDX components:
          Callout: ({ type, children }) => (
            <div className={`callout callout-${type}`}>{children}</div>
          ),
          PackageStats: ({ name }) => <PackageStatsWidget name={name} />,
        }}
        options={{
          mdxOptions: {
            rehypePlugins: [rehypeHighlight, rehypeSlug],
            remarkPlugins: [remarkGfm],
          },
        }}
      />
    </article>
  )
}

// Fetch MDX from any source — database, Contentful, Sanity, etc.:
async function getBlogPost(slug: string) {
  // Example: from Supabase
  const { data } = await supabase
    .from("posts")
    .select("title, description, content, published_at")
    .eq("slug", slug)
    .single()
  return data
}

export default async function BlogPost({ params }: Props) {
  const post = await getBlogPost(params.slug)

  return (
    <article>
      <h1>{post.title}</h1>
      <MDXRemote source={post.content} />
    </article>
  )
}

// app/blog/[slug]/page.tsx
import { glob } from "glob"
import path from "path"

export async function generateStaticParams() {
  const files = await glob("content/blog/*.mdx", { cwd: process.cwd() })

  return files.map((file) => ({
    slug: path.basename(file, ".mdx"),
  }))
}

// velite.config.ts
import { defineConfig, defineCollection, s } from "velite"
import rehypeHighlight from "rehype-highlight"
import remarkGfm from "remark-gfm"

// Define the schema for blog posts:
const posts = defineCollection({
  name: "Post",
  pattern: "content/blog/**/*.mdx",
  schema: s
    .object({
      title: s.string().max(99),
      description: s.string().max(999),
      date: s.isodate(),   // Validates ISO date format
      author: s.string().default("PkgPulse Team"),
      tags: s.array(s.string()).default([]),
      draft: s.boolean().default(false),
      // computed fields:
      slug: s.path(),      // Derived from file path
      permalink: s.string().transform((_, { meta }) => `/blog/${meta.path}`),
    })
    .transform((data) => ({
      ...data,
      // Add reading time:
      readingTime: Math.ceil(data.content?.split(/\s+/).length / 200),
    })),
})

// Define package comparison pages:
const comparisons = defineCollection({
  name: "Comparison",
  pattern: "content/comparisons/**/*.mdx",
  schema: s.object({
    packageA: s.string(),
    packageB: s.string(),
    category: s.enum(["framework", "orm", "testing", "tooling", "styling"]),
    verdict: s.string().optional(),
    date: s.isodate(),
  }),
})

export default defineConfig({
  root: "content",
  output: {
    data: ".velite",   // TypeScript types output here
    assets: "public/static",
  },
  collections: { posts, comparisons },
  mdx: {
    rehypePlugins: [rehypeHighlight],
    remarkPlugins: [remarkGfm],
  },
})

// app/blog/page.tsx — Blog listing
import { posts } from "@/.velite"

export default function BlogPage() {
  // posts is fully typed — TypeScript knows the schema:
  const publishedPosts = posts
    .filter((p) => !p.draft)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

  return (
    <div>
      {publishedPosts.map((post) => (
        <article key={post.slug}>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
          <time>{post.date}</time>
          <span>{post.readingTime} min read</span>
          <div>
            {post.tags.map((tag) => <span key={tag}>{tag}</span>)}
          </div>
        </article>
      ))}
    </div>
  )
}

// app/blog/[slug]/page.tsx — Blog post
import { posts } from "@/.velite"
import { notFound } from "next/navigation"
import { MDXContent } from "@/components/mdx-content"

export async function generateStaticParams() {
  return posts.map((post) => ({ slug: post.slug }))
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  const post = posts.find((p) => p.slug === params.slug)
  if (!post) notFound()

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.date}</time>

      {/* Velite provides typed MDX content: */}
      <MDXContent code={post.content} />
    </article>
  )
}

// components/mdx-content.tsx
"use client"
import { useMDXComponent } from "next-contentlayer2/hooks"  // Or velite's equivalent

const components = {
  h2: ({ children }) => <h2 className="text-2xl">{children}</h2>,
  PackageStats: ({ name }: { name: string }) => <PackageStatsWidget name={name} />,
  Callout: ({ type, children }) => <div className={`callout-${type}`}>{children}</div>,
}

export function MDXContent({ code }: { code: string }) {
  const MDXComponent = useMDXComponent(code)
  return <MDXComponent components={components} />
}

// Velite generates types automatically at build time:
// @/.velite/index.d.ts (auto-generated):
export interface Post {
  title: string
  description: string
  date: string
  author: string
  tags: string[]
  draft: boolean
  slug: string
  permalink: string
  readingTime: number
  content: string  // Compiled MDX
}

// Full IntelliSense in your editor — no manual type definitions needed

// ⚠️ Contentlayer issues in 2026:
// 1. Not updated for Next.js 14+ App Router properly
// 2. GitHub: last meaningful commit was 2023
// 3. Issues with Next.js 15 RSC compilation
// 4. Community has largely migrated to Velite

// Migration from Contentlayer to Velite is straightforward:
// contentlayer.config.ts → velite.config.ts (similar schema API)
// import { allPosts } from "contentlayer/generated" → import { posts } from "@/.velite"

# Remove Contentlayer
npm uninstall contentlayer next-contentlayer

# Install Velite
npm install velite

// contentlayer.config.ts (before)
import { defineDocumentType, makeSource } from "contentlayer/source-files"
import rehypeHighlight from "rehype-highlight"

export const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: "blog/**/*.mdx",
  contentType: "mdx",
  fields: {
    title: { type: "string", required: true },
    description: { type: "string", required: true },
    date: { type: "date", required: true },
    tags: { type: "list", of: { type: "string" }, default: [] },
  },
  computedFields: {
    slug: {
      type: "string",
      resolve: (post) => post._raw.flattenedPath.replace("blog/", ""),
    },
  },
}))

export default makeSource({
  contentDirPath: "content",
  documentTypes: [Post],
  mdx: { rehypePlugins: [rehypeHighlight] },
})

// velite.config.ts (after)
import { defineConfig, defineCollection, s } from "velite"
import rehypeHighlight from "rehype-highlight"

const posts = defineCollection({
  name: "Post",
  pattern: "blog/**/*.mdx",
  schema: s.object({
    title: s.string().max(99),
    description: s.string().max(999),
    date: s.isodate(),
    tags: s.array(s.string()).default([]),
    slug: s.path(),
  }),
})

export default defineConfig({
  root: "content",
  collections: { posts },
  mdx: { rehypePlugins: [rehypeHighlight] },
})

// Before (Contentlayer)
import { allPosts } from "contentlayer/generated"

// After (Velite)
import { posts } from "@/.velite"