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)

Hi! Apologies for resurrecting this post, but could I sanity-check a couple of points with you?

I’m trying to use next/mdx with app router and Next.js 16.2, creating a component from an external file and using it in a page.tsx

I’ve installed the deps, updated next.config.ts and created mdx-components.tsx in /sec but having issues.

The .mdx file is being read, I can refer to the component, but the information is inserted as text (not converted to HTML).

My understanding from the docs was that I wouldn’t have to add any custom code to get basic Markdown conversion - is that incorrect?

Is there some idiosyncrasy about the basic toolkit I’m using (16.2, app router, Typescript) that’s currently not supported?

Have you got any ideas @B33fb0n3 ?

make sure to open your own thread in #help-forum and whenever I am able to help you, I will help you