Files
supabase/apps/docs/lib/mdx/generateRefMarkdown.tsx
Gildas Garcia 743d665dfe chore: migrate from next-mdx-remote to next-mdx-remote-client (#45149)
## Problem

We want to upgrade to react 19. However some libraries aren't compatible
with it. Besides, `next-mdx-remote` is now archived and not maintained
anymore.

## Solution

The [NextJS
documentation)[https://nextjs.org/docs/15/app/guides/mdx#remote-mdx]
suggest using
[`next-mdx-remote-client`](https://github.com/ipikuka/next-mdx-remote-client)
which was a fork of `next-mdx-remote`.

- [x] migrate `apps/www` from `next-mdx-remote` to
`next-mdx-remote-client`
- [x] migrate `apps/www` from `next-mdx-remote` to
`next-mdx-remote-client`

I haven't noticed any change in the pages.
When upgrading to react 19, we'll have to use v2 of
`next-mdx-remote-client`.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Switched MDX rendering/serialization to a newer client-focused
implementation across docs and site for improved compatibility.

* **Bug Fixes**
* Improved handling of serialization errors so MDX failures render clear
fallback messages instead of breaking pages.

* **Chores**
* Updated local environment template value for the public anonymous key.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-06 16:02:49 +02:00

60 lines
1.7 KiB
TypeScript

import fs from 'fs'
import type { ICommonMarkdown } from '~/components/reference/Reference.types'
import codeHikeTheme from 'config/code-hike.theme.json' with { type: 'json' }
import matter from 'gray-matter'
import { serialize } from 'next-mdx-remote-client/serialize'
import remarkGfm from 'remark-gfm'
async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
let markdownContent: any[] = []
/**
* Read all the markdown files that might have
* - custom text
* - call outs
* - important notes regarding implementation
*/
await Promise.all(
sections.map(async (section) => {
const pathName = `docs/ref${slug}/${section.id}.mdx`
function checkFileExists(x) {
if (fs.existsSync(x)) {
return true
} else {
return false
}
}
const markdownExists = checkFileExists(pathName)
if (!markdownExists) return null
const fileContents = markdownExists ? fs.readFileSync(pathName, 'utf8') : ''
const { data, content } = matter(fileContents)
markdownContent.push({
id: section.id,
title: section.title,
meta: data,
// introPage: introPages.includes(x),
content: content
? await serialize({
source: content ?? '',
options: {
// MDX's available options, see the MDX docs for more info.
// https://mdxjs.com/packages/mdx/#compilefile-options
mdxOptions: {
remarkPlugins: [remarkGfm],
},
},
})
: null,
})
})
)
return markdownContent
}
export default generateRefMarkdown