如果需要将Nextra的站点部署至CloudFlare，那么有极大概率会失败。这是由于Nextra用的框架是Next.js，而由于CF Pages默认的Node.js版本不支持Next.js，故会失败。本期教程以我的实战经验分享，一起来在CF Pages上部署Nextra。

准备材料

  • CloudFlare 账号一枚
  • GitHub / GitLab 账号一枚

部署步骤

  1. 准备好一个Nextra的站点项目，我这里托管到GitHub上面

在CF Pages部署Nextra网页

  1. 修改next.config.js文件，将默认的那一行module.exports = withNextra()修改为下面的内容
typescript

1
2
3
4
5
6
 
module.exports = {
  ...withNextra(),
  images: {
    unoptimized: true,
  },
}
  1. 打开CloudFlare控制台的Pages页面，依次点击“创建项目”→“连接至Git”

在CF Pages部署Nextra网页

  1. 选择项目仓库，然后点击“开始设置”

在CF Pages部署Nextra网页

  1. 输入项目名称，框架选“Next.js”或者是看我下图设置框架

在CF Pages部署Nextra网页

  1. 设置环境变量NODE_VERSION=16，然后点击“保存并部署”

在CF Pages部署Nextra网页

  1. 等待Pages CI部署

在CF Pages部署Nextra网页

  1. 待可以打开网页，即表示部署成功

在CF Pages部署Nextra网页