アルアカ - Arcadia Academia

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

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

• GitHubアカウント（無料で登録）
• Node.jsのインストール（公式サイトからダウンロード）
• Gitのインストール（Git公式サイト）

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

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

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

npm run dev

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

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

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を適切に処理するために有効化。

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

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "export": "next export",
  "deploy": "npm run build && echo > out/.nojekyll && gh-pages -d out"
}

※.nojekyllについて

GitHub Pages は、もともと Jekyll という静的サイトジェネレーターを使って自動的に .md ファイルをHTMLに変換したり、不要なファイルをスキップしたりする仕組みがあるのですが、そのせいで、静的ホスティングとして利用しようとしても正常に動作しない場合があります。そのため Jekyll を無効化するために、.nojekyll という、GitHub Pages で Jekyll を無効化するためのファイルをプロジェクトルートに配置する必要があります。

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

npm install gh-pages --save-dev

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

リポジトリの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/

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

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

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

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

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

解決策:

• next.config.js の assetPrefix や basePath の設定を再確認。
• 静的ファイルのパスを public フォルダに正しく配置する。
• .nojekyll をgh-pages のルートに配置する。

解決策:

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

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

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

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