Use frontmatter title to set MDX title page

References

• https://github.com/vercel/next.js/issues/14984
• https://blog.logrocket.com/create-next-js-mdx-blog/#creating-layout
• https://stackoverflow.com/questions/75162387/add-custom-layout-for-mdx-in-next-js

Solution

Add <title> HTML tag directly in your mdx file. The variable frontmatter.title is exposed from remark-mdx-frontmatter plugin.

// ./example.mdx
import { MDXTitle } from "@/postx/mdx/MDXTitle.jsx"

<MDXTitle title={frontmatter.title}/>