使用 Github 页面部署 React Next.js 应用程序的步骤

由于 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://<your-github-username>.github.io/<your-repo-name>",
  "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 Next.js 应用程序的步骤的详细内容。更多信息请关注PHP中文网其他相关文章！