由于 github pages 的静态特性和 next.js 的动态功能，将 next.js 应用程序部署到 github pages 可能有点棘手。在本文中，我将引导您完成成功部署的步骤。
先决条件
github 帐户您的计算机上安装了 node.js 和 npm准备部署的 next.js 项目
第 1 步：安装 gh-pages
npm install gh-pages –save-dev
第 2 步：更新 next.config.mjs
接下来，您需要更新 next.config.js（或 next.config.mjs）文件以正确处理基本路径和资源前缀。
const isprod = process.env.node_env === 'production';const nextconfig = { reactstrictmode: true, images: { unoptimized: true, // disable default image optimization }, assetprefix: isprod ? '/your-repository-name/' : '', basepath: isprod ? '/your-repository-name' : '', output: 'export'};export default nextconfig;
isprod 检查 node_env 环境变量是否设置为“生产”。如果是，isprod 将为 true；否则，它将是错误的。
仅当 isprod 为 true 时，条件 assetprefix 和 basepath 才会设置为您的存储库名称。否则，它们将被设置为空字符串以供本地开发。
images.unoptimized 选项设置为 true 以禁用默认图像优化，这与静态导出不兼容。
第 3 步：更新 package.json
更新您的 package.json 以包含主页字段和部署脚本。
"homepage": "https://.github.io/", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "predeploy": "npm run build", "deploy": "gh-pages -d out" },
将 和 替换为您的 github 用户名和存储库名称。
第 4 步：部署您的应用
运行 npm run predeploy 和 npm run deploy
这些命令将：
构建您的项目。导出到out目录。将其部署到 github 上的 gh-pages 分支。在下一步之前将您的工作推送到 github 分支
第 5 步：配置 github 页面
转到 github 上的存储库。
导航至设置 > 页面。
在“源”下，选择 gh-pages 分支。
保存设置。
在 github 上 gh-pages 分支的根目录下手动添加 .nojekyll 文件。在这里了解更多相关信息。
第 6 步：验证部署
部署后，打开您的 github pages url（例如 https://.github.io/）以验证您的应用程序是否已上线。
瞧！
请随时在下面留下任何问题或评论。快乐编码！
以上就是使用 Github 页面部署 React Nextjs 应用程序的步骤的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1493184.html
微信扫一扫 
支付宝扫一扫 
