アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Next.jsで作ったポートフォリオをGitHub Pagesにデプロイしよう!

Featured image of the post

Next.jsは、Reactベースの人気フレームワークであり、ポートフォリオサイトの制作にも最適です。しかし、通常の静的サイトとは異なり、GitHub Pagesへのデプロイにはいくつかのステップが必要です。本記事では、Next.jsで作成したポートフォリオをGitHub Pagesにデプロイする方法を詳しく解説します。


[目次を開く]

1. Next.jsをGitHub Pagesにデプロイする際のポイント

Next.jsはデフォルトでは動的なレンダリングが可能ですが、GitHub Pagesは静的サイトのみ対応しています。そのため、Next.jsプロジェクトを静的ファイルにビルドし、それをGitHub Pagesにアップロードする形で運用します。

事前準備

2. Next.jsプロジェクトの作成

まず、Next.jsのプロジェクトを作成していない場合は、以下のコマンドで新規作成します。

npx create-next-app@latest my-portfolio
cd my-portfolio

その後、プロジェクトをローカル環境で確認するために、以下のコマンドを実行します。

npm run dev

ブラウザで http://localhost:3000 にアクセスし、アプリが動作することを確認してください。


3. GitHubリポジトリの作成

  1. GitHubにログインし、「New repository(新しいリポジトリ)」を作成。
  2. リポジトリ名を「my-portfolio」とし、**Public(公開)**に設定。
  3. 「Create repository」をクリックして、リポジトリを作成します。

4. Next.jsの設定を変更

next.config.js の編集

GitHub Pagesではリポジトリの名前がURLに含まれるため、Next.jsの設定を調整します。プロジェクトルートにある next.config.js を開き、次のように修正してください。

module.exports = {
  assetPrefix: isProd ? '/my-portfolio/' : '',
  basePath: isProd ? '/my-portfolio' : '',
  trailingSlash: true,
};
  • assetPrefix: CSSや画像の読み込みパスを正しく指定。
  • basePath: すべてのページのルートパスをリポジトリ名に設定。
  • trailingSlash: 静的ファイルのURLを適切に処理するために有効化。

5. Next.jsプロジェクトの静的ファイルをビルド

Next.jsを静的ファイルとしてエクスポートするために、package.json のスクリプトを追加します。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "export": "next export",
  "deploy": "npm run build && npm run export && gh-pages -d out"
}

6. 必要なパッケージのインストール

GitHub Pagesへのデプロイを簡単にするために、gh-pages パッケージをインストールします。

npm install gh-pages --save-dev

7. GitHub Pagesへデプロイ

以下の手順でプロジェクトをGitHub Pagesにアップロードします。

① GitHubリモートリポジトリの追加

リポジトリのURLを取得し、ターミナルで以下のコマンドを実行します。

git init
git remote add origin https://github.com/あなたのユーザー名/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin main
② ビルド&デプロイの実行

以下のコマンドで、静的ファイルのビルドとデプロイを実行します。

npm run deploy

処理が完了すると、GitHub Pagesにデプロイされ、以下のURLでアクセス可能になります。

https://あなたのユーザー名.github.io/my-portfolio/

8. GitHub Pagesの設定

GitHubリポジトリの 「Settings」→「Pages」 から、以下の設定を確認してください。

  1. 「Branch」gh-pages を選択。
  2. 数分待つと公開URLが表示されます。

9. カスタムドメインの設定(オプション)

独自ドメインを持っている場合、GitHub Pagesの設定画面で「Custom domain」を追加し、DNS設定を行うことで独自ドメインを利用できます。


10. デプロイ後の確認

ブラウザで https://あなたのユーザー名.github.io/my-portfolio/ にアクセスし、以下を確認しましょう。

  • ページが正常に表示されるか
  • CSSや画像が正しく読み込まれるか
  • リンクが正常に動作しているか

11. よくあるエラーと対策

❌ CSSや画像が読み込まれない

解決策:

  • next.config.jsassetPrefixbasePath の設定を再確認。
  • 静的ファイルのパスを public フォルダに正しく配置する。
❌ 404エラーが発生する

解決策:

  • trailingSlash: true を設定し、URLの末尾にスラッシュをつける。

まとめ

Next.jsのポートフォリオをGitHub Pagesにデプロイする手順をまとめると以下の通りです。

  1. プロジェクト作成 & 設定調整next.config.js の編集)
  2. 静的ファイルのビルドnpm run export
  3. GitHub Pagesへデプロイgh-pages を使用)
  4. 公開URLの確認

この方法を活用して、自分のNext.jsポートフォリオを世界に公開しましょう!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会