React Next.js アプリを Github ページでデプロイする手順

GitHub Pages の静的な性質と Next.js の動的機能により、Next.js アプリを GitHub Pages にデプロイするのは少し難しい場合があります。この記事では、do it を正常にデプロイするための手順を説明します。

前提条件

• 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 環境変数が「production」に設定されているかどうかを確認します。そうである場合、isProd は true になります。それ以外の場合は false になります。
条件付きのassetPrefixとbasePathは、isProdがtrueの場合にのみリポジトリ名に設定されます。それ以外の場合は、ローカル開発用に空の文字列に設定されます。
デフォルトの画像最適化を無効にするために、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 rundeploy を実行します

これらのコマンドは次のことを行います:

• プロジェクトをビルドします。
• out ディレクトリにエクスポートします。
• GitHub の gh-pages ブランチにデプロイします。 次のステップの前に、作業内容を GitHub ブランチにプッシュしてください

ステップ 5: GitHub ページを構成する

GitHub 上のリポジトリに移動します。
[設定] > [設定] に移動します。ページ。
「ソース」で、gh-pages ブランチを選択します。
設定を保存します。
GitHub の gh-pages ブランチのルートに .nojekyll ファイルを手動で追加します。詳細については、こちらをご覧ください。

ステップ 6: デプロイメントを確認する

デプロイ後、GitHub Pages URL (例: https://.github.io/) を開いて、アプリがライブであることを確認します。

そして出来上がりです!

ご質問やコメントがございましたら、お気軽に以下に残してください。コーディングを楽しんでください!

以上がReact Next.js アプリを Github ページでデプロイする手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。