使用Nextra构建站点能否导出静态文件手动上传至自有网站？

你需要的纯静态导出、手动上传到自有网站的操作完全可行，你遇到的报错是Next.js内置的默认图片优化功能和纯静态导出模式不兼容导致的，按如下步骤操作即可完成导出：

步骤1：修改next.config.js配置 #

在项目根目录的next.config.js文件中新增图片优化禁用配置，参考配置如下：

const withNextra = require('nextra')({
  // 保留你原本的Nextra配置，比如主题、主题配置文件路径
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.jsx'
})

module.exports = withNextra({
  // 新增以下配置
  // 禁用Next.js默认图片优化，解决与静态导出的兼容性问题
  images: {
    unoptimized: true
  },
  // 配置开启纯静态导出，构建时自动生成静态文件目录，Next.js 13及以上版本支持
  output: 'export'
})

步骤2：执行构建命令 #

配置修改完成后，直接执行：
yarn build

如果你使用的是Next.js 12及更早版本，不需要加output: 'export'配置，执行yarn build && yarn next export命令即可

步骤3：获取静态文件 #

构建完成后，项目根目录会自动生成out文件夹，该文件夹内的所有文件就是可直接部署的静态资源，你将该文件夹下的全部内容上传到你的网站服务器对应目录即可正常访问博客。

可选方案 #

如果你的博客对图片加载性能要求较高，不想禁用图片优化，也可以选择：

• 自行配置第三方静态图片加载器，适配你的静态存储服务
• 替换所有next/image组件为原生<img>标签，完全绕开Next.js的图片处理逻辑

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