Use frontmatter title to set MDX title page

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
<title>{frontmatter.title}</title>