yes, @next/mdx is the thing. With it you can also render content like you would do with next-mdx-remote. So there is no difference

figured as much! Also see a lot of folks using fumadocs for a blog, but looking for the most lightweight solution atm

this is the easiest solution that you can get: https://github.com/vercel/next.js/tree/canary/examples/blog-starter

No api, nothing special, no UI to add new blogs.
Just code and adding new files as blogs and it will pick them automatically up

ty 🙂 if I choose to go with next's official mdx solution, what's the easiest way to set up gray-matter with it for metadata?

preferably still want to keep my meta data in the format of:

---
slug: "test-post"
title: "Test Post"
date: 2026-03-06
---

rather than the exported constant.

its pretty simple. You can just call its function and you receive the content and the data. Like that you can work with it:

const fileContents = fs.readFileSync(actualPath, 'utf8');
const { data, content } = matter(fileContents);

return {
  slug,
  title: data.title || data.Title || '',
  keywords: data.keywords || data.Keywords || [],
  date: ensureStringDate(data.date || data.Date),
  description: data.description || data.Description || '',
  ogImage: data.ogImage || data.OGImage || undefined,
  content,
};

In your data with "slug, title" and "date" you only got those 3. I added for myself keywords, description and ogImage as well

The whole (default) method is in the repo that I shared as well: https://github.com/vercel/next.js/blob/canary/examples/blog-starter/src/lib/api.ts#L16

cheers 🙂 is it possible to override the mdx components next/mdx provides in order to add custom properties?

i.e

<MDXContent data{post.data} />

currently doing:

  const { default: MDXContent, metadata } = await import(
    `@/content/posts/${params.slug}.mdx`
  )
  return (
    <div
      lang={'en'}
    >
      <MDXContent />
    </div>
  )
}

which of course grabs the metadata as an exported const, but is it possible to just override that then by doing like matter

I dont understand what you need... you want to remove the --- part?

No. I'm looking to parse my metadata using my mdx structured metadata, otherwise i'll have to spend several hours editing ~200+ mdx files to export const metadata for everything;

Looks like next/mdx makes that possible if I add the plugins:

import createMDX from '@next/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'

const withMDX = createMDX({
  options: {
    remarkPlugins: [
      remarkFrontmatter,
      [remarkMdxFrontmatter, { name: 'metadata' }],
    ],
  },
})

yea, either use a plugin or do this: https://nextjs-forum.com/post/1479312244625113281#message-1479386984312213598 (using matter)