[v3] insert frontMatter as export node in remark plugin (#2265)

Author: Dimitri POSTOLOV

.changeset/brave-ties-train.md

@@ -0,0 +1,7 @@
+---
+'nextra': major
+---
+
+- insert `frontMatter` as export node via custom remark plugin
+
+- remove `frontMatter.mdxOptions` support

docs/pages/docs/guide/image.mdx

@@ -30,7 +30,7 @@ just use the `![]()` Markdown syntax:
 This loads the `demo.png` file inside the `public` folder, and automatically
 wraps it with Next.js `<Image>`.
 
-<Callout>
+<Callout type="info">
   You can also use `![](../public/demo.png)` to load the image from a relative
   path, if you don't want to host it via `public`.
 </Callout>

docs/pages/docs/guide/ssg.mdx

@@ -1,3 +1,5 @@
+import { useData } from 'nextra/data'
+
 # Next.js SSG
 
 With Next.js, you can pre-render your page using
@@ -7,10 +9,8 @@ can also be cached by a CDN to maximize the performance.
 
 This is supported by Nextra too. Here's an example:
 
-import { useData } from 'nextra/data'
-
-export const getStaticProps = ({ params }) => {
-  return fetch(`https://api.github.com/repos/shuding/nextra`)
+export function getStaticProps() {
+  return fetch('https://api.github.com/repos/shuding/nextra')
     .then(res => res.json())
     .then(repo => ({
       props: {
@@ -25,7 +25,7 @@ export const getStaticProps = ({ params }) => {
     }))
 }
 
-export const Stars = () => {
+export function Stars() {
   // Get the data from SSG, and render it as a component.
   const { stars } = useData()
   return <strong>{stars}</strong>
@@ -46,8 +46,8 @@ Here's the MDX code for the example above:
 ```mdx
 import { useData } from 'nextra/data'
 
-export const getStaticProps = ({ params }) => {
-  return fetch(`https://api.github.com/repos/shuding/nextra`)
+export function getStaticProps() {
+  return fetch('https://api.github.com/repos/shuding/nextra')
     .then(res => res.json())
     .then(repo => ({
       props: {
@@ -62,7 +62,7 @@ export const getStaticProps = ({ params }) => {
     }))
 }
 
-export const Stars = () => {
+export function Stars() {
   // Get the data from SSG, and render it as a component.
   const { stars } = useData()
   return <strong>{stars}</strong>

examples/swr-site/pages/en/docs/arguments.md renamed to examples/swr-site/pages/en/docs/arguments.mdx

@@ -1,3 +1,5 @@
+import { Callout } from 'nextra/components'
+
 # Arguments
 
 By default, `key` will be passed to `fetcher` as the argument. So the following
@@ -34,13 +36,13 @@ key will also be associated with `token` now.
 
 ## Passing Objects
 
-import { Callout } from 'nextra/components'
-
 <Callout>
-  Since SWR 1.1.0, object-like keys will be serialized under the hood automatically. 
+  Since SWR 1.1.0, object-like keys will be serialized under the hood
+  automatically.
 </Callout>
-  
-Say you have another function that fetches data with a user scope: `fetchWithUser(api, user)`. You can do the following:
+
+Say you have another function that fetches data with a user scope:
+`fetchWithUser(api, user)`. You can do the following:
 
 ```js
 const { data: user } = useSWR(['/api/user', token], fetchWithToken)
@@ -60,5 +62,5 @@ const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
 ```
 
 <Callout emoji="⚠️">
-  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed. 
+  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed.
 </Callout>

examples/swr-site/pages/en/docs/middleware.md renamed to examples/swr-site/pages/en/docs/middleware.mdx

@@ -2,9 +2,7 @@ import { Callout } from 'nextra/components'
 
 # Middleware
 
-<Callout>
-  Upgrade to the latest version (≥ 1.0.0) to use this feature.
-</Callout>
+<Callout>Upgrade to the latest version (≥ 1.0.0) to use this feature.</Callout>
 
 The middleware feature is a new addition in SWR 1.0 that enables you to execute
 logic before and after SWR hooks.
@@ -182,7 +180,8 @@ const { data, isLagging, resetLaggy } = useSWR(key, fetcher, { use: [laggy] })
 ### Serialize Object Keys
 
 <Callout>
-  Since SWR 1.1.0, object-like keys will be serialized under the hood automatically. 
+  Since SWR 1.1.0, object-like keys will be serialized under the hood
+  automatically.
 </Callout>
 
 <Callout emoji="⚠️">
@@ -213,5 +212,7 @@ serialized to the same string, and the fetcher will still receive those object
 arguments.
 
 <Callout>
-  Furthermore, you can use libs like [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify) instead of `JSON.stringify` — faster and stabler.
+  Furthermore, you can use libs like
+  [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify)
+  instead of `JSON.stringify` — faster and stabler.
 </Callout>

examples/swr-site/pages/en/docs/with-nextjs.md renamed to examples/swr-site/pages/en/docs/with-nextjs.mdx

@@ -67,5 +67,6 @@ fully powered by SWR on the client side. The data can be dynamic and
 self-updated over time.
 
 <Callout>
-  The `Article` component will render the pre-generated data first, and after the page is hydrated, it will fetch the latest data again to keep it refresh.
+  The `Article` component will render the pre-generated data first, and after
+  the page is hydrated, it will fetch the latest data again to keep it refresh.
 </Callout>

examples/swr-site/pages/en/remote/graphql-eslint/[[...slug]].mdx

@@ -17,8 +17,7 @@ export async function getStaticProps({ params }) {
       ...(await buildDynamicMDX(data, {
         defaultShowCopyCode: true
       }))
-    },
-    revalidate: 10
+    }
   }
 }
 

examples/swr-site/pages/en/remote/graphql-yoga/[[...slug]].mdx

@@ -17,8 +17,7 @@ export async function getStaticProps({ params }) {
       ...(await buildDynamicMDX(data, {
         defaultShowCopyCode: true
       }))
-    },
-    revalidate: 10
+    }
   }
 }
 

examples/swr-site/pages/en/test.md

@@ -1,7 +1,3 @@
----
-mdxOptions: { format: 'md' }
----
-
 # Hello!
 
 This is an MD file instead of MDX, which means you can use syntax like this:

examples/swr-site/pages/es/docs/arguments.md renamed to examples/swr-site/pages/es/docs/arguments.mdx

@@ -38,10 +38,12 @@ la key del caché también estará asociada al `token`.
 import { Callout } from 'nextra/components'
 
 <Callout>
-  Since SWR 1.1.0, object-like keys will be serialized under the hood automatically. 
+  Since SWR 1.1.0, object-like keys will be serialized under the hood
+  automatically.
 </Callout>
-  
-Say you have another function that fetches data with a user scope: `fetchWithUser(api, user)`. You can do the following:
+
+Say you have another function that fetches data with a user scope:
+`fetchWithUser(api, user)`. You can do the following:
 
 ```js
 const { data: user } = useSWR(['/api/user', token], fetchWithToken)
@@ -61,5 +63,5 @@ const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
 ```
 
 <Callout emoji="⚠️">
-  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed. 
+  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed.
 </Callout>

examples/swr-site/pages/es/docs/with-nextjs.md renamed to examples/swr-site/pages/es/docs/with-nextjs.mdx

@@ -71,5 +71,6 @@ fully powered by SWR on the client side. The data can be dynamic and
 self-updated over time.
 
 <Callout>
-  The `Article` component will render the pre-generated data first, and after the page is hydrated, it will fetch the latest data again to keep it refresh.
+  The `Article` component will render the pre-generated data first, and after
+  the page is hydrated, it will fetch the latest data again to keep it refresh.
 </Callout>

examples/swr-site/pages/ru/docs/arguments.md renamed to examples/swr-site/pages/ru/docs/arguments.mdx

@@ -37,10 +37,12 @@ const { data: user } = useSWR(['/api/user', token], fetchWithToken)
 import { Callout } from 'nextra/components'
 
 <Callout>
-  Since SWR 1.1.0, object-like keys will be serialized under the hood automatically. 
+  Since SWR 1.1.0, object-like keys will be serialized under the hood
+  automatically.
 </Callout>
-  
-Say you have another function that fetches data with a user scope: `fetchWithUser(api, user)`. You can do the following:
+
+Say you have another function that fetches data with a user scope:
+`fetchWithUser(api, user)`. You can do the following:
 
 ```js
 const { data: user } = useSWR(['/api/user', token], fetchWithToken)
@@ -60,5 +62,5 @@ const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
 ```
 
 <Callout emoji="⚠️">
-  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed. 
+  In older versions (< 1.1.0), SWR **shallowly** compares the arguments on every render, and triggers revalidation if any of them has changed.
 </Callout>

examples/swr-site/pages/ru/docs/middleware.md renamed to examples/swr-site/pages/ru/docs/middleware.mdx

@@ -183,7 +183,8 @@ const { data, isLagging, resetLaggy } = useSWR(key, fetcher, { use: [laggy] })
 ### Сериализация ключей объекта
 
 <Callout>
-  Since SWR 1.1.0, object-like keys will be serialized under the hood automatically. 
+  Since SWR 1.1.0, object-like keys will be serialized under the hood
+  automatically.
 </Callout>
 
 <Callout emoji="⚠️">
@@ -214,5 +215,7 @@ useSWR(['/api/user', { id: '73' }], fetcher, { use: [serialize] })
 аргументы объекта.
 
 <Callout>
-  Кроме того, вы можете использовать такие библиотеки, как [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify) вместо `JSON.stringify` — быстрее и стабильнее.
+  Кроме того, вы можете использовать такие библиотеки, как
+  [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify)
+  вместо `JSON.stringify` — быстрее и стабильнее.
 </Callout>

examples/swr-site/pages/ru/docs/with-nextjs.md renamed to examples/swr-site/pages/ru/docs/with-nextjs.mdx

@@ -70,5 +70,7 @@ export default function Page({ fallback }) {
 Данные могут быть динамическими и автоматически обновляться с течением времени.
 
 <Callout>
-  Компонент `Article` сначала отрендерит предварительно сгенерированные данные, а после гидратации страницы он снова получит последние данные, чтобы они были актуальными.
+  Компонент `Article` сначала отрендерит предварительно сгенерированные данные,
+  а после гидратации страницы он снова получит последние данные, чтобы они были
+  актуальными.
 </Callout>

packages/nextra/__test__/__snapshots__/compile.test.ts.snap

@@ -5,6 +5,7 @@ exports[`Process heading > code-h1 1`] = `
   "frontMatter": {},
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const frontMatter = {};
 export const __toc = [];
 function _createMdxContent(props) {
   const _components = Object.assign({
@@ -28,6 +29,7 @@ exports[`Process heading > code-with-text-h1 1`] = `
   "frontMatter": {},
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const frontMatter = {};
 export const __toc = [];
 function _createMdxContent(props) {
   const _components = Object.assign({
@@ -52,6 +54,7 @@ exports[`Process heading > dynamic-h1 1`] = `
   "hasJsxInH1": true,
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const frontMatter = {};
 import {useRouter} from 'next/router';
 export const TagName = () => {
   const {tag} = useRouter().query;
@@ -79,6 +82,7 @@ exports[`Process heading > no-h1 1`] = `
   "frontMatter": {},
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const frontMatter = {};
 export const __toc = [{
   depth: 2,
   value: \\"H2\\",
@@ -104,6 +108,7 @@ exports[`Process heading > static-h1 1`] = `
   "frontMatter": {},
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const frontMatter = {};
 export const __toc = [];
 function _createMdxContent(props) {
   const _components = Object.assign({

packages/nextra/__test__/__snapshots__/page-map.test.ts.snap

@@ -571,11 +571,6 @@ exports[`Page Process > should match i18n site page maps 1`] = `
       "route": "/en/remote",
     },
     {
-      "frontMatter": {
-        "mdxOptions": {
-          "format": "md",
-        },
-      },
       "kind": "MdxPage",
       "name": "test",
       "route": "/en/test",

packages/nextra/__test__/compile.test.ts

@@ -96,6 +96,7 @@ import Last from './three.mdx'
     expect(result).toMatchInlineSnapshot(`
       "/*@jsxRuntime automatic @jsxImportSource react*/
       import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+      export const frontMatter = {};
       import FromMdx, {__toc as __toc0} from './one.mdx';
       import FromMarkdown, {__toc as __toc1} from './two.md';
       import IgnoreMe from './foo';

packages/nextra/package.json

@@ -108,7 +108,7 @@
     "clean": "rimraf ./dist ./style.css",
     "dev": "tsup --watch",
     "prepublishOnly": "pnpm build",
-    "test": "vitest run",
+    "test": "vitest",
     "types": "tsup --dts-only",
     "types:check": "tsc --noEmit"
   },
@@ -125,6 +125,7 @@
     "@theguild/remark-mermaid": "^0.0.4",
     "@theguild/remark-npm2yarn": "0.2.0-alpha-20230904225308-5ba1c7b",
     "clsx": "^2.0.0",
+    "estree-util-value-to-estree": "^3.0.1",
     "github-slugger": "^2.0.0",
     "graceful-fs": "^4.2.11",
     "gray-matter": "^4.0.3",
@@ -135,6 +136,7 @@
     "rehype-katex": "^6.0.3",
     "rehype-pretty-code": "0.9.11",
     "rehype-raw": "^7.0.0",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-reading-time": "^2.0.1",
@@ -143,6 +145,7 @@
     "title": "^3.5.3",
     "unist-util-remove": "^4.0.0",
     "unist-util-visit": "^5.0.0",
+    "yaml": "^2.3.2",
     "zod": "^3.22.2",
     "zod-validation-error": "^1.5.0"
   },

packages/nextra/src/compile.ts

@@ -4,11 +4,11 @@ import { createProcessor } from '@mdx-js/mdx'
 import type { Processor } from '@mdx-js/mdx/lib/core'
 import { remarkMermaid } from '@theguild/remark-mermaid'
 import { remarkNpm2Yarn } from '@theguild/remark-npm2yarn'
-import grayMatter from 'gray-matter'
 import rehypeKatex from 'rehype-katex'
 import type { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeRaw from 'rehype-raw'
+import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
@@ -27,12 +27,14 @@ import {
   remarkHeadings,
   remarkLinkRewrite,
   remarkMdxDisableExplicitJsx,
+  remarkMdxFrontMatter,
   remarkRemoveImports,
   remarkStaticImage,
   remarkStructurize
 } from './mdx-plugins'
 import theme from './theme.json'
 import type {
+  FrontMatter,
   LoaderOptions,
   PageOpts,
   ReadingTime,
@@ -104,15 +106,12 @@ export async function compileMdx(
     defaultShowCopyCode,
     route = '',
     locale,
-    mdxOptions,
+    mdxOptions = {},
     filePath = '',
     useCachedCompiler,
     isPageImport = true
   }: CompileMdxOptions = {}
 ) {
-  // Extract frontMatter information if it exists
-  const { data: frontMatter, content } = grayMatter(source)
-
   let searchIndexKey: string | null = null
   if (ERROR_ROUTES.has(route)) {
     /* skip */
@@ -136,11 +135,7 @@ export async function compileMdx(
     remarkPlugins,
     rehypePlugins,
     rehypePrettyCodeOptions
-  }: MdxOptions = {
-    ...mdxOptions,
-    // You can override MDX options in the frontMatter too.
-    ...frontMatter.mdxOptions
-  }
+  }: MdxOptions = mdxOptions
 
   const format =
     _format === 'detect' ? (filePath.endsWith('.mdx') ? 'mdx' : 'md') : _format
@@ -165,7 +160,7 @@ export async function compileMdx(
 
   try {
     const vFile = await processor.process(
-      filePath ? { value: content, path: filePath } : content
+      filePath ? { value: source, path: filePath } : source
     )
 
     const { title, hasJsxInH1, readingTime, structurizedData } = vFile.data as {
@@ -176,13 +171,21 @@ export async function compileMdx(
     // https://github.com/shuding/nextra/issues/1032
     const result = String(vFile).replaceAll('__esModule', '_\\_esModule')
 
+    const frontMatter = (vFile.data.frontMatter || {}) as FrontMatter
+
+    if (frontMatter.mdxOptions) {
+      throw new Error('`frontMatter.mdxOptions` is no longer supported')
+    }
+
     return {
       result,
       ...(title && { title }),
       ...(hasJsxInH1 && { hasJsxInH1 }),
       ...(readingTime && { readingTime }),
       ...(searchIndexKey !== null && { searchIndexKey, structurizedData }),
-      ...(isRemoteContent && { headings: vFile.data.headings }),
+      ...(isRemoteContent && {
+        headings: vFile.data.headings
+      }),
       frontMatter
     }
   } catch (err) {
@@ -208,6 +211,8 @@ export async function compileMdx(
           }
         ] satisfies Pluggable,
         isRemoteContent && remarkRemoveImports,
+        remarkFrontmatter, // parse and attach yaml node
+        [remarkMdxFrontMatter, { isRemoteContent }] satisfies Pluggable,
         remarkGfm,
         format !== 'md' &&
           ([

packages/nextra/src/layout.tsx

@@ -7,19 +7,25 @@ export default function Nextra({
   __nextra_dynamic_opts,
   ...props
 }: any): ReactElement {
-  const { Layout, themeConfig, Content, pageOpts } = useInternals()
+  const { Layout, themeConfig, Content, ...rest } = useInternals()
+
+  let { pageOpts } = rest
 
   if (__nextra_pageMap) {
-    pageOpts.pageMap = __nextra_pageMap
+    pageOpts = {
+      ...pageOpts,
+      pageMap: __nextra_pageMap
+    }
   }
 
   if (__nextra_dynamic_opts) {
     const { headings, title, frontMatter } = JSON.parse(__nextra_dynamic_opts)
-    Object.assign(pageOpts, {
+    pageOpts = {
+      ...pageOpts,
       headings,
       title,
       frontMatter
-    })
+    }
   }
   return (
     <Layout themeConfig={themeConfig} pageOpts={pageOpts}>

packages/nextra/src/loader.ts

@@ -168,11 +168,13 @@ ${themeConfigImport && '__nextra_internal__.themeConfig = __themeConfig'}`
   const locale =
     locales[0] === '' ? '' : mdxPath.replace(PAGES_DIR, '').split('/')[1]
 
-  // todo: rethink to save to fileMap dynamic pages
-  const route = mdxPath.includes('[')
-    ? '/' +
-      path.relative(PAGES_DIR, mdxPath).replace(MARKDOWN_EXTENSION_REGEX, '')
-    : fileMap[mdxPath].route
+  const route =
+    '/' +
+    path
+      .relative(PAGES_DIR, mdxPath)
+      .replace(MARKDOWN_EXTENSION_REGEX, '')
+      .replace(/(^|\/)index$/, '')
+
   const {
     result,
     title,
@@ -205,13 +207,14 @@ ${themeConfigImport && '__nextra_internal__.themeConfig = __themeConfig'}`
   if (!isPageImport) {
     return result
   }
-
   // Logic for resolving the page title (used for search and as fallback):
   // 1. If the frontMatter has a title, use it.
   // 2. Use the first h1 heading if it exists.
   // 3. Use the fallback, title-cased file name.
   const fallbackTitle =
-    frontMatter.title || title || pageTitleFromFilename(fileMap[mdxPath].name)
+    frontMatter.title ||
+    title ||
+    pageTitleFromFilename(path.parse(mdxPath).name)
 
   if (searchIndexKey && frontMatter.searchable !== false) {
     // Store all the things in buildInfo.
@@ -238,7 +241,6 @@ ${themeConfigImport && '__nextra_internal__.themeConfig = __themeConfig'}`
 
   let pageOpts: Partial<PageOpts> = {
     filePath: slash(path.relative(CWD, mdxPath)),
-    ...(Object.keys(frontMatter).length > 0 && { frontMatter }),
     hasJsxInH1,
     timestamp,
     readingTime,
@@ -255,7 +257,7 @@ ${themeConfigImport && '__nextra_internal__.themeConfig = __themeConfig'}`
 
   const stringifiedPageOpts =
     JSON.stringify(pageOpts).slice(0, -1) +
-    ',headings:__toc,pageMap:__nextraPageMap}'
+    ',headings:__toc,pageMap:__nextraPageMap,frontMatter}'
   const stringifiedChecksum = IS_PRODUCTION
     ? "''"
     : JSON.stringify(hashFnv32a(stringifiedPageOpts))

packages/nextra/src/mdx-plugins/__tests__/remark-mdx-frontmatter.test.ts

@@ -0,0 +1,86 @@
+import { compile } from '@mdx-js/mdx'
+import type { VFile } from '@mdx-js/mdx/lib/compile'
+import remarkFrontmatter from 'remark-frontmatter'
+import { remarkMdxFrontMatter } from '../remark-mdx-frontmatter'
+
+function process(content: string, isRemoteContent = false): Promise<VFile> {
+  return compile(content, {
+    jsx: true,
+    remarkPlugins: [
+      remarkFrontmatter,
+      [remarkMdxFrontMatter, { isRemoteContent }]
+    ]
+  })
+}
+
+const YAML_FRONTMATTER = '---\nfoo: bar\n---'
+const ESM_FRONTMATTER = "export const frontMatter = { foo: 'bar' }"
+
+function trim(value: VFile): string {
+  const string = String(value)
+  return string
+    .slice(0, string.indexOf('function _createMdxContent'))
+    .replace('/*@jsxRuntime automatic @jsxImportSource react*/', '')
+    .trim()
+}
+
+describe('remarkMdxFrontMatter', () => {
+  it('should throw error if both yaml/esm frontmatter are used', () => {
+    const processor = process(`${YAML_FRONTMATTER}\n${ESM_FRONTMATTER}`)
+    expect(() => processor).rejects.toThrowError(
+      "Both yaml frontMatter and esm export frontMatter aren't supported. Keep only 1."
+    )
+  })
+
+  describe('yaml frontmatter', () => {
+    describe('not remote content', async () => {
+      const file = await process(YAML_FRONTMATTER)
+
+      it.skip('should not add file.data', () => {
+        expect(file.data).toEqual({})
+      })
+
+      it('should export yaml frontmatter', () => {
+        expect(trim(file)).toMatchInlineSnapshot(`
+      "export const frontMatter = {
+        \\"foo\\": \\"bar\\"
+      };"
+    `)
+      })
+    })
+
+    describe('remote content', async () => {
+      const file = await process(YAML_FRONTMATTER, true)
+
+      it('should add data.frontMatter', () => {
+        expect(file.data).toEqual({ frontMatter: { foo: 'bar' } })
+      })
+
+      it('should not export yaml frontmatter', () => {
+        expect(trim(file)).toMatchInlineSnapshot('""')
+      })
+    })
+  })
+
+  describe('esm frontmatter', () => {
+    describe('not remote content', async () => {
+      const file = await process(ESM_FRONTMATTER)
+      it.skip('should not add file.data', () => {})
+
+      it('should export esm frontmatter', () => {
+        expect(trim(file)).toMatchInlineSnapshot(`
+          "export const frontMatter = {
+            foo: 'bar'
+          };"
+        `)
+      })
+    })
+
+    describe('remote content', async () => {
+      const file = await process(ESM_FRONTMATTER, true)
+      it('should not export esm frontmatter', () => {
+        expect(trim(file)).toMatchInlineSnapshot('""')
+      })
+    })
+  })
+})

packages/nextra/src/mdx-plugins/index.ts

@@ -1,5 +1,6 @@
 export { parseMeta, attachMeta } from './rehype'
 export { remarkCustomHeadingId } from './remark-custom-heading-id'
+export { remarkMdxFrontMatter } from './remark-mdx-frontmatter'
 export { remarkHeadings } from './remark-headings'
 export { remarkRemoveImports } from './remark-remove-imports'
 export {

packages/nextra/src/mdx-plugins/remark-mdx-frontmatter.ts

@@ -0,0 +1,80 @@
+import { valueToEstree } from 'estree-util-value-to-estree'
+import type { Parent, Root } from 'mdast'
+import type { Plugin } from 'unified'
+import { parse as parseYaml } from 'yaml'
+
+function createNode(data: Record<string, unknown>): any {
+  return {
+    type: 'mdxjsEsm',
+    data: {
+      estree: {
+        body: [
+          {
+            type: 'ExportNamedDeclaration',
+            specifiers: [],
+            declaration: {
+              type: 'VariableDeclaration',
+              kind: 'const',
+              declarations: [
+                {
+                  type: 'VariableDeclarator',
+                  id: { type: 'Identifier', name: 'frontMatter' },
+                  init: valueToEstree(data)
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+
+export const remarkMdxFrontMatter: Plugin<
+  [{ isRemoteContent?: boolean }?],
+  Root
+> =
+  ({ isRemoteContent } = {}) =>
+  (ast: Parent, file) => {
+    const yamlNodeIndex = ast.children.findIndex(node => node.type === 'yaml')
+    const esmNodeIndex = ast.children.findIndex((node: any) => {
+      if (node.type !== 'mdxjsEsm') return
+      const name =
+        node.data.estree.body[0].declaration?.declarations?.[0].id.name
+      return name === 'frontMatter'
+    })
+    const hasYaml = yamlNodeIndex !== -1
+    const hasEsm = esmNodeIndex !== -1
+
+    if (hasYaml) {
+      if (hasEsm) {
+        throw new Error(
+          "Both yaml frontMatter and esm export frontMatter aren't supported. Keep only 1."
+        )
+      }
+
+      const raw = (ast.children[yamlNodeIndex] as { value: string }).value
+      const data = parseYaml(raw)
+
+      file.data.frontMatter = data
+      if (!isRemoteContent) {
+        ast.children[yamlNodeIndex] = createNode(data)
+      }
+      return
+    }
+
+    if (hasEsm) {
+      if (isRemoteContent) {
+        const [node] = ast.children.splice(esmNodeIndex, 1) as any
+
+        // TODO: attach data to file.data.frontMatter
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const objectNode =
+          node.data.estree.body[0].declaration.declarations[0].init
+      }
+      return
+    }
+
+    // Attach dummy node
+    ast.children.unshift(createNode({}))
+  }

packages/nextra/src/types.ts

@@ -1,4 +1,3 @@
-import type { GrayMatterFile } from 'gray-matter'
 import type { Heading as MDASTHeading } from 'mdast'
 import type { NextConfig } from 'next'
 import type { FC, ReactNode } from 'react'
@@ -49,7 +48,7 @@ export type DynamicMetaJsonFile = {
   data: DynamicMeta
 }
 
-export type FrontMatter = GrayMatterFile<string>['data']
+export type FrontMatter = Record<string, any>
 export type Meta = string | Record<string, any>
 
 export type MdxFile<FrontMatterType = FrontMatter> = {

packages/nextra/src/use-internals.ts

@@ -12,6 +12,7 @@ export function useInternals() {
     NEXTRA_INTERNAL
   ]
   const { route } = useRouter()
+  console.log({route})
   const rerender = useState({})[1]
 
   // The HMR handling logic is not needed for production builds, the condition