Access frontmatter via mdx

[devjiwonchoi]

I'm currently importing an mdx file into my mdx in pages.

I want to do something like:

// original file

---
title: Introduction
description: Welcome to the Next.js Documentation.
---

Welcome to the Next.js documentation!

into:

// /pages/index.mdx

import Introduction from 'docs/index.mdx'

# {frontmatter.title}

<Introduction />

P.S. When I try to use useConfig, it gives me this:

import { useConfig } from 'nextra-theme-docs'
import Introduction from 'docs/index.mdx'

export const frontMatter = useConfig().frontMatter

<Introduction />

TypeError: Cannot read properties of null (reading 'useContext')

Assuming useConfig is only allowed inside theme.config.tsx.

[devjiwonchoi]

Duplicate of #1508, and my issue was that while embedding mdx on mdx, the frontmatter is left behind, resulting in frontmatter = {}.

Short answer for now:

// theme.config.tsx

import { useConfig } from 'nextra-theme-docs'

// ...
main: ({ children }) => {
  const { frontMatter } = useConfig()
  return (
    <>
      <h1 className="nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight">
        {frontMatter.title}
      </h1>
      {children}
    </>
  )
},
// ...

[mkschreder]

Does this even still work in v4? It seems useConfig has been removed from nextra theme docs