副業検証ログ
ブログ運営

Next.jsプロジェクトを作ってGitHubと連携する方法｜AIブログ構築の第4ステップ【2026年版】

シリーズ第4回。Next.jsプロジェクトの作成からmicroCMS連携、GitHubへのpushまでを実演します。所要時間45〜60分。Node.jsインストール、API連携、.env.local管理、PAT認証など、初心者がつまずきやすいポイントを実体験ベースで解説。

by 副業検証ログ運営者
Next.jsプロジェクトを作ってGitHubと連携する方法｜AIブログ構築の第4ステップ【2026年版】

前回（第3回）でmicroCMSの初期設定が終わって、「記事の入れ物」が用意できた状態です。

今回はその次のステップ、「箱の中身を表示するためのフロント側」を作っていきます。具体的には、Next.jsというフレームワークでブログのプロジェクトを作って、microCMSと接続して、コードをGitHubに保存するところまで進めます。

ここまでやれば、次回（第5回）でCloudflare Pagesから世界中にブログを公開できる状態になります。今回はその一歩手前、「ローカルで動くNext.jsアプリ」と「GitHubに保存されたコード」を完成させるのがゴールです。

前回のおさらいや、まだmicroCMSの設定が終わっていない方は、こちらから先に進めてください。

→ 第3回：microCMSで記事の入れ物を作る方法｜ブログCMSの初期設定完全ガイド【2026年版】

この記事のゴール

この記事を読み終えたあとに、Next.jsアプリがローカルで動き、GitHubにコードが上がっている状態を目指します。

  • 所要時間：45〜60分
  • 用意するもの：PC、メールアドレス、Googleアカウント、microCMSのAPIキー（第3回で取得したもの）
  • 費用：すべて無料で進められます

慣れないターミナル操作も出てきますが、コマンドはコピペで進められるよう書いていきます。一緒にやってみましょう。

事前準備：Node.jsのインストール

まずは、Next.jsを動かすために必要なNode.jsをPCにインストールします。Node.jsは「JavaScriptをパソコンで動かす仕組み」と思ってもらえれば十分です。

推奨バージョン

LTS版（v24系）を選んでください。LTS（Long Term Support）は長期サポート版という意味で、安定して使えるバージョンです。

インストール手順

  1. Node.js公式サイトにアクセス
  2. 画面中央の「LTS版」をクリックしてダウンロード
  3. ダウンロードしたインストーラーを実行し、案内に従ってインストール
  4. インストールが終わったら、ターミナル（コマンドプロンプトまたはPowerShell）を開いて以下を実行

node -v

v24.x.x のようにバージョンが表示されれば、インストール完了です。

※画像はPowerShellバージョン

事前準備：GitHubアカウントの作成

GitHubは、コードを保存・管理するためのサービスです。ブログのコードをここに置くことで、変更履歴を残したり、Cloudflare Pagesと連動して自動デプロイができるようになります。

アカウント作成手順

  1. GitHub公式サイトにアクセス
  2. 「Sign up」をクリック
  3. メールアドレス、パスワード、ユーザー名を入力
  4. 確認メールが届くので、本文中のリンクをクリックして認証

二段階認証は必ず設定

アカウントを作ったら、すぐに二段階認証を有効化しておいてください。GitHubはコードや設定の重要な拠点になるので、セキュリティを最初から固めておくのが安全です。設定はアカウントメニュー → Settings → Password and authentication から進められます。

※画像は順次追加予定（GitHub サインアップ画面）

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

Next.jsは、Reactをベースにしたフレームワークで、ブログやLPの静的サイト生成に強いのが特徴です。Next.js公式サイトで詳しい情報が確認できます。

プロジェクト作成コマンド

ターミナルで、プロジェクトを置きたいフォルダに移動して、以下を実行します。

npx create-next-app@latest myblog

「myblog」の部分は好きな名前にしてOKです。実行すると、いくつか質問が出てきます。

質問への回答指針

  • TypeScript：Yes（後で型エラーで助けられます）
  • ESLint：Yes（コード品質のチェックに役立ちます）
  • Tailwind CSS：Yes（スタイリングが圧倒的に楽になります）
  • src/ directory：Yes（コードが整理されます）
  • App Router：Yes（新しい標準ルーティングです）
  • その他：基本的にデフォルトのままでOK

動作確認

プロジェクトのフォルダに入って、以下を実行します。

cd myblog
npm run dev

ターミナルに Ready in... と表示されたら、ブラウザで http://localhost:3000 を開きます。Next.jsのデフォルト画面が表示されれば成功です。

※画像は順次追加予定（create-next-app の対話的なプロンプト画面）

※画像は順次追加予定（http://localhost:3000 でデフォルトのNext.js画面が表示されたスクリーンショット）

microCMS連携の設定

ここがこの記事の山場です。Next.jsから第3回で作ったmicroCMSのデータを取得できるように、5つのステップで連携します。

1. microCMS公式SDKのインストール

プロジェクトのフォルダで、ターミナルから以下を実行します。

npm install microcms-js-sdk

2. 環境変数ファイルの作成

プロジェクトのルートに .env.local というファイルを作って、以下を書きます。

MICROCMS_SERVICE_DOMAIN=あなたのサービスID
MICROCMS_API_KEY=読み取り専用APIキー

サービスIDは第3回で決めたもの、APIキーは第3回で取得した読み取り専用キーを使ってください。

3. .gitignoreに含まれているか確認

create-next-appで作ったプロジェクトには、.gitignoreに最初から .env* が入っているはずですが、念のため開いて確認してください。.env.localがGitに上がるとAPIキーが漏れます。

私もここで、.env.localを.gitignoreに入れ忘れて、危うくAPIキーをGitHubに公開しそうになりました。コミットする前に必ず確認する習慣をつけておくと安全です。

4. クライアントファイルの作成

src/libs/microcms.tsというファイルを作って、microCMSへの接続コードを書きます。フォルダが無ければ新規作成してください。microCMS公式と microcms-js-sdk のREADMEに、分かりやすい雛形コードが載っています。

5. トップページから記事を取得

src/app/page.tsxを編集して、microCMSから記事一覧を取得して表示します。

編集後、ブラウザで http://localhost:3000 をリロード。microCMSに入稿した記事のタイトルが表示されたら、連携成功です。

※画像は順次追加予定（.env.local ファイルの編集画面（APIキーはマスク済みの例））

※画像は順次追加予定（microCMS の記事一覧が Next.js のローカル画面に表示されたスクリーンショット）

GitHubリポジトリの作成

microCMSとの連携ができたら、コードをGitHubに保存するための「リポジトリ」を作ります。

手順

  1. GitHubにログインして、画面右上の「+」→「New repository」をクリック
  2. Repository name：プロジェクト名を入力（例：myblog）
  3. 公開設定：Private を選択（個人開発はPrivate推奨です）
  4. 「Initialize this repository」のチェックは全て外す（後でローカルから初回pushするため）
  5. 「Create repository」をクリック

作成後の画面にgitコマンドが表示されます。これを次のステップで使います。

※画像は順次追加予定（GitHub の New repository 画面）

ローカルからGitHubへのpush

最後に、ローカルで作ったNext.jsプロジェクトをGitHubに送ります。

手順

プロジェクトのフォルダで、ターミナルから以下を順に実行します。

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/myblog.git
git push -u origin main

最後の git push でGitHub認証が求められます。Personal Access Token（PAT）を使うのが現在の標準です。GitHubのSettings → Developer settings → Personal access tokensから発行できます。

注意点

  • .env.local がpushされていないか必ず確認してください。GitHubのリポジトリページを開いて、ファイル一覧に.env.localが無いことを目視確認します
  • 初回pushでつまずいた場合、認証エラーの可能性が高いです。次のセクションで対処法を載せています

※画像は順次追加予定（GitHub のリポジトリページに最初のコミットが反映された画面（.env.local が無いことが分かる））

よくあるトラブルと対処法

実体験ベースで、私や知人がつまずいた3つのトラブルと対処法をまとめておきます。

1. .env.local をうっかりコミットしてしまった

もし .env.local をうっかり push してしまった場合は、次の順で対応してください。

  1. すぐに microCMS 管理画面の「APIキー管理」を開く
  2. 該当APIキーを無効化または再発行する
  3. 新しいAPIキーで手元の .env.local を更新する
  4. その後、GitHub 履歴から該当ファイルを削除する

注意：GitHub の履歴を消してもキーは「一度公開された」扱いになります。無効化が最優先で、履歴削除はその後で問題ありません。

2. GitHubへのpushで認証エラー

「Authentication failed」のようなエラーが出る場合は、ほぼ認証関係です。対処法は次のいずれか。

  • Personal Access Token（PAT）を発行してパスワードの代わりに使う
  • GitHub CLI（gh）を使って gh auth login で認証する

3. microCMSから記事が取得できない

ブラウザに何も表示されない、エラーが出る場合は次を順に確認します。

  • .env.localのサービスIDとAPIキーが正しいか
  • npm run devを一度止めて再起動したか（環境変数は再起動で読み直されます）
  • microCMSの管理画面で実際に記事が公開されているか

まとめ + 次回予告

ここまでで、Next.jsプロジェクトがローカルで動き、GitHubにコードが上がった状態になりました。

サイトの「住所」（ドメイン）、「記事の入れ物」（microCMS）、「フロント側のコード」（Next.js + GitHub）と、技術的なピースがほぼ揃ってきました。

次回（第5回）では、Cloudflare Pagesでデプロイするステップに進みます。GitHubに上げたコードを世界中からアクセスできる状態にする、いよいよ「公開」の工程です。

第5回はまだ公開予定です。準備が整い次第、こちらに公開します。

→ 第5回：Cloudflare Pagesでデプロイする（公開予定）

シリーズ全体の流れを再確認したい方は、第1回のハブ記事に戻ってみてください。

→ 第1回：AI時代の個人ブログを月額157円で運用｜立ち上げ手順と必要なツール【2026年版】

第3回（microCMS設定）を見直したい方はこちらから戻れます。

→ 第3回：microCMSで記事の入れ物を作る方法｜ブログCMSの初期設定完全ガイド【2026年版】

← 記事一覧に戻る