md0 CMS FOR
NEXT.JS
INTEGRATION GUIDE

Sign in with GitHub OAuth

Go to cms.md0.io and click Sign in with GitHub. You will be taken to GitHub to authorize md0. Grant access to the repositories you want to manage — you can limit this to specific repos rather than granting access to everything.

md0 requests read and write access to repository contents. This is required to read your existing markdown files and to commit new content when editors save their work.

Select your Next.js repo

After authentication, you land on the repository selection screen. Pick your Next.js project from the list. If the repo does not appear, you may need to grant md0 access to it in your GitHub OAuth app settings.

Once you select the repo, md0 scans the directory tree and lists all .md and .mdx files it finds. You do not need to add any config files to your repo at this stage.

What md0 detects automatically

md0 reads your repo structure and identifies:

• — Directories that contain markdown files (likely content collections)
• — Frontmatter field names already used in your existing files
• — Whether files use .md or .mdx extensions
• — Your default branch

This auto-detection means md0 can suggest a starting schema for your content without you doing any manual setup.

What each part does

Listing all posts — app/blog/page.tsx

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import Link from 'next/link'

export default async function BlogIndex() {
  const postsDir = path.join(process.cwd(), 'content/posts')
  const files = fs.readdirSync(postsDir).filter(f => /\.mdx?$/.test(f))

  const posts = files
    .map(file => {
      const slug = file.replace(/\.mdx?$/, '')
      const raw = fs.readFileSync(path.join(postsDir, file), 'utf8')
      const { data } = matter(raw)
      return { slug, ...data }
    })
    .filter(post => post.published)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>{post.title}</Link>
            <p>{post.date}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

Filtering by published status

The .filter(post => post.published) line filters out posts where published: false. This is how you keep draft content out of your production build. Editors set the toggle in md0 when they are ready to publish. The next build automatically includes the post.

Pages Router with ISR

If you want new posts to appear without a full rebuild, add revalidate to getStaticProps:

return {
  props: { frontmatter, content },
  revalidate: 60, // seconds
}

With ISR, Next.js will regenerate the page in the background after 60 seconds if a request comes in. This means new posts from md0 go live within a minute without waiting for a full deploy.

My content is not showing up in Next.js

The most likely cause is a path mismatch. Check that the path in your md0 schema exactly matches the directory your Next.js code reads from.

If your code does this:

Your md0 schema path must be:

Build fails after md0 edits

This usually means a frontmatter field name in the committed file does not match what your code expects. For example, if your schema defines a field called date but your Next.js component reads frontmatter.publishedAt, the value will be undefined.

Check your schema field names match exactly. Open a post file on GitHub after an md0 edit and confirm the frontmatter looks right:

---
title: My Post Title
date: 2024-06-01
excerpt: A short description
published: true
---

Images are not working

By default, md0 uploads images to a directory in your repo. For Next.js, images need to be in the public/ directory to be served at runtime.

In your md0 media library settings, set the upload path to public/images. Images uploaded through md0 will then be available at /images/filename.jpg in your Next.js app. Your markdown can reference them with a relative path like ![alt text](/images/filename.jpg).

My repo does not appear in md0

GitHub OAuth apps require explicit per-repo access unless you granted access to all repos during sign-in. Go to your GitHub account settings, find the md0 OAuth app under Applications, and grant access to the specific repo you want to use.

Builds are slow after md0 saves

This is a deployment platform issue, not an md0 issue. If you are on Vercel, consider enabling ISR with revalidate (Pages Router) or next: { revalidate: 60 } (App Router) so individual pages update without a full rebuild.