ホームページ >ウェブフロントエンド >jsチュートリアル >React Next.js アプリを Github ページでデプロイする手順

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-12 06:30:02555ブラウズ

teps to deploy your React Next.js app with Github pages

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。