使用next-mdx-remote无法从GitHub仓库获取MDX文件的问题

核心问题 #

你当前请求的是GitHub仓库的网页展示URL，返回的是包含页面UI的JSON数据（即错误日志里的大段内容），而非纯MDX文本，导致next-mdx-remote无法解析，触发编译错误。

首要解决步骤：修正请求URL #

把请求地址改成GitHub的原始文件地址，两种方式任选：

• 在原URL末尾追加?raw=true
• 替换路径中的blob为raw

修改后的fetch代码：

const res = await fetch('https://github.com/CodeCraft-Vanilla/wiki/raw/f6bd136f5f21e93daa17991371615889358aa06d/test.mdx', {cache: 'no-store'})

此时就能获取到纯MDX内容，next-mdx-remote可正常编译。

GitHub Token的使用场景与方法 #

仅当仓库为私有仓库，或请求次数超过GitHub匿名请求限额（每小时60次）时，才需要使用GitHub Token。

1. 创建Token #

• 登录GitHub，进入「Settings → Developer settings → Personal access tokens → Tokens (classic)」
• 生成新Token，按需勾选权限：私有仓库选repo，公开仓库选public_repo（用于提升请求限额）
• 复制生成的Token并妥善保存（仅显示一次）

2. 在Next.js中配置并使用Token #

• 在项目根目录创建.env.local文件，写入：

GITHUB_TOKEN=你的GitHub Token

• 修改fetch请求，添加Authorization头：

const res = await fetch('https://github.com/CodeCraft-Vanilla/wiki/raw/f6bd136f5f21e93daa17991371615889358aa06d/test.mdx', {
  cache: 'no-store',
  headers: {
    Authorization: `token ${process.env.GITHUB_TOKEN}`
  }
})

额外提示 #

• 代码在服务器组件中运行，环境变量无需加NEXT_PUBLIC_前缀，避免暴露到客户端。
• 若为静态站点，建议用getStaticProps或generateStaticParams预获取MDX内容，减少运行时请求。

内容的提问来源于stack exchange，提问作者zzhuravleff