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リポジトリの作成
- GitHubにログインし、「New repository(新しいリポジトリ)」を作成。
- リポジトリ名を「my-portfolio」とし、**Public(公開)**に設定。
- 「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」 から、以下の設定を確認してください。
- 「Branch」 で
gh-pages
を選択。 - 数分待つと公開URLが表示されます。
9. カスタムドメインの設定(オプション)
独自ドメインを持っている場合、GitHub Pagesの設定画面で「Custom domain」を追加し、DNS設定を行うことで独自ドメインを利用できます。
10. デプロイ後の確認
ブラウザで https://あなたのユーザー名.github.io/my-portfolio/
にアクセスし、以下を確認しましょう。
- ページが正常に表示されるか
- CSSや画像が正しく読み込まれるか
- リンクが正常に動作しているか
11. よくあるエラーと対策
❌ CSSや画像が読み込まれない
解決策:
-
next.config.js
のassetPrefix
やbasePath
の設定を再確認。 - 静的ファイルのパスを
public
フォルダに正しく配置する。
❌ 404エラーが発生する
解決策:
-
trailingSlash: true
を設定し、URLの末尾にスラッシュをつける。
まとめ
Next.jsのポートフォリオをGitHub Pagesにデプロイする手順をまとめると以下の通りです。
- プロジェクト作成 & 設定調整(
next.config.js
の編集) - 静的ファイルのビルド(
npm run export
) - GitHub Pagesへデプロイ(
gh-pages
を使用) - 公開URLの確認
この方法を活用して、自分のNext.jsポートフォリオを世界に公開しましょう!