GitHubとは？

GitHubは、世界中の開発者がコードを共有し、共同作業するためのプラットフォームです。

リポジトリと呼ばれる場所にソースコードやプロジェクトファイルを保存し、他の開発者と協力して編集やレビューを行います。

GitHubアカウントの作成方法については以下の記事で解説していますので、参考にしてみてください！

GitHub Codespacesとは？クラウド上で動作する統合開発環境（IDE）

統合開発環境（IDE）を使うことにより、開発者はローカルマシンに複雑な開発環境をセットアップすることなく、ブラウザから直接開発を開始できます。

GitHub上のリポジトリとシームレスに連携しており、コードの編集、実行、テストなどをクラウド上で行うことが可能です。

本ブログで扱っていくNext.jsのソースコードも基本的にはGitHub Codespacesで開発していこうと思います。

⚠️ GitHub Codespacesには時間による使用制限もありますので制限にかかった方は、課金するか、ローカルに環境を作るなどして対応してください。

GitHub Codespacesのメリット

クラウド上で動作する利便性

GitHub Codespacesはローカルマシンに依存しないため、どのデバイスからでも開発環境にアクセスできます。

例えば、ノートパソコンやタブレットでもクラウド上で実行されるため、高性能なデバイスがなくても開発を行うことができます。

開発環境の高速セットアップ

通常、プロジェクトを始める際には、ローカルマシンに必要なソフトウェアやツールをインストールする必要がありますが、GitHub Codespacesなら、あらかじめ構築された開発環境を即座に使い始めることができます。

環境の統一化

チーム全体で同じ環境を使えるため、個々の開発者が異なる環境を使って生じる「動く／動かない」問題を解決できます。特にリモートワーク時や大規模プロジェクトで非常に便利です。

GitHubアカウントの作成

GitHub Codespacesを使うにはGitHubのアカウントが必要ですので作成しておいてください！基本は無料で使えます。

  1. GitHub公式サイトにアクセスし、「Sign up」をクリックします。
  2. メールアドレス、パスワード、ユーザー名を入力し、アカウントを作成します。
  3. 指示に従い、必要な情報を入力すれば、GitHubアカウントが作成されます。

詳しい手順は以下の記事でも解説していますので、ご参照ください！

リポジトリとCodespacesの作成

リポジトリの作成方法

リポジトリは以下の記事で作った「nextjs-sample-web」を使います。リポジトリがないとCodespaceを起動できないので事前に作っておいてください！

Codespacesの作成手順

Codespacesの作成

  1. リポジトリのページに移動し、「Code」ボタンをクリック。
  2. 「Codespaces」タブを選択し、「Create codespace on main」をクリックします。
  3. 数分でCodespaceが立ち上がり、ブラウザ上で開発環境が利用可能になります。以下のような画面になれば作成完了です！

Codespaces初期画面

GitHub Codespacesの使い方

Next.jsのアプリを作成する

GitHub Codespacesを作成できたら、Next.jsのアプリを作ってみましょう！

必要なnodeやnpxなどは既に使えるようになっているのであとは下記のコマンドを実行するだけです！IDE便利ですね！

npx create-next-app@latest --typescript

ℹ️ 2025/09/07 Next.js 14 → 15 に変更しました

本ブログではTypescriptを使いますのでそのオプションも指定しています。

npx createコマンド

コマンドを実行すると色々と質問されますが、最初はyで答え、その後も全てデフォルトで進めます。

npx createオプション選択

以下のようにアプリ(my-app)が作成されたらOKです！フォルダやファイルがいくつか作成されています。

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

Next.jsのアプリを起動する

アプリを作成できたら、まずはアプリを起動して、その後、ファイルを編集してみましょう！

cdコマンド

cdコマンドでアプリのフォルダに移動して

cd my-app

npm run devコマンド

npm run devコマンドでアプリを起動します。

npm run dev

⚠️ Codespaceを久しぶりに起動した場合などに依存関係がなくエラーになることがあります。その場合以下で依存パッケージをインストールし直して見てください。

cd my-app
npm ci # Dev Container 無効時のみ必要
npm run dev

また、このような環境差異を避けるため、基本的に後述のDevContainerを採用することにしました（2025/09/07 にGithubコミット済み）

起動すると、ブラウザで開くか？聞かれるので、「Open in browser」を押しましょう。別タブでNext.jsのアプリが開きます！これでCodespacesだけでアプリ開発してブラウザでの確認ができます！便利！

nextjsアプリをブラウザで開く

別タブでNext.jsの初期ページが表示されます。

nextjsの初期ページ

アプリを起動できたら少しページを変更してみましょう。

Codespace内では、Visual Studio Code（VS Code）と同じようにファイルを編集できます。ファイルをダブルクリックするとエディタが開き、コードを編集できます。

ここではpage.tsxを編集します。

nextjsのpage.tsx

ここに <li>Cali Codeへようこそ！</li> を追加します。

<li>Cali Codeへようこそ！</li>

追加して保存するとNext.jsのCompileが自動で走るので、ページが自動更新されます！素敵ですね！

nextjsのページ編集

以下のようになっていればOKです！

nextjsのページ編集

トラブルシューティング

  • next: not found — node_modules 未作成。Dev Container を有効にして Rebuild → 自動 npm ci。一時回避は手動 npm ci
  • "You are on our default image" が出る — Dev Container が効いていない。.devcontainer/devcontainer.json をリポジトリ直下に置き直し、Rebuild Without Cache
  • pnpm Feature エラーで Recovery に落ちる — ghcr.io/devcontainers/features/pnpm:1 取得失敗。Feature を使わず、npm 運用 or Corepack で pnpm を有効化
  • Node バージョン差異 — Next.js 14 は Node 18.17+（推奨 20/22）。node -v で確認
  • モノレポ時 — ルートで npm install し、npm run -w my-app dev で起動

ソースコードをコミットする

せっかくなので、変更をGitHubのリポジトリにコミットしておきましょう。赤枠の「Source Control」からコミット用のメニューを開きます。

Source Controlを開く

コミットメッセージを入力します。

GitHubへの変更のコミット

Commitボタンを押して、確認が出るのでYESを選びましょう

GitHubへの変更のコミット確認

Sync Changesを押すと変更がリポジトリに反映されますので問題なければ押してください！

GitHubへの変更のPUSH

リポジトリに戻って変更が反映されたか見てみましょう！

別タブでURLを手入力で戻るなり、以下のようにCodespacesを選んで戻るなりしてください。

My Codespaces

Your Codespaces

以下の赤枠のリポジトリを選ぶと戻れます。

Codespaceからリポジトリへ

こんな感じでさきほど書いたコミットメッセージの変更が反映されていればOKです！

リポジトリの変更確認

GitHub Codespacesのカスタマイズ

Dev Containerの設定 {#dev_container}

CodespaceではDev Containerを利用して、開発環境をさらにカスタマイズできます。devcontainer.jsonファイルを作成し、必要な環境設定を行います。

{
  "name": "nextjs-npm",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bullseye",
  "postCreateCommand": "cd my-app && npm ci",
  "forwardPorts": [3000]
}

VS Code拡張機能のインストール

VS Codeと同じように拡張機能をインストールできます。例えば、PrettierやESLintのような開発を補助するツールを導入することで効率的に開発が可能です。

ご自身が使っているプラグインを入れてみてくださいね〜。

GitHub Codespacesの料金プラン

無料枠と有料プランの違い

GitHub Codespacesには無料枠があり、月に一定時間までは無料で利用できます。それ以上の時間を利用する場合は、時間単位で課金されます。

コスト管理のポイント

開発が終わった後は、Codespaceを停止することで無駄なコストを削減できます。

また、必要以上に高性能なマシンスペックを選択しないことで、コストを最小限に抑えられます。

よくあるトラブルと対策

Codespaceが起動しない場合の対処法

Codespaceが起動しない場合は、以下の手順を試してみてください。

  • ブラウザのキャッシュをクリアする。
  • GitHub Codespacesのダッシュボードから再度起動する。

その他の一般的な問題解決方法

画面が暗くなる場合やファイルの保存に問題がある場合は、GitHubサポートに問い合わせるか、公式ドキュメントを参照しましょう。

まとめ

本記事では、初心者向けに GitHub Codespaces を使って、Next.js アプリを動かす方法について詳しく解説ました。

GitHub Codespacesの概要やメリット（クラウド上での開発環境の利便性、高速セットアップ、環境の統一化）について説明した後、具体的なアカウント作成方法やリポジトリ作成、そしてCodespaceの作成手順を紹介しています。

GitHub Codespaces内でのNext.jsアプリの作成から起動、ファイルの編集、ソースコードのコミットまで、初心者でも実践しやすいステップバイステップのガイドが掲載されています。

また、開発環境のカスタマイズ方法として、Dev ContainerやVS Codeの拡張機能のインストール方法についても触れています。

さらに、GitHub Codespacesの料金プランの違いや、無駄なコストを抑えるためのコスト管理のポイントも解説しました！

本記事を読めば、GitHub Codespacesを使って簡単にクラウド上でNext.jsアプリを開発できるようになりますので、ぜひご自身のアプリを作ってみてください！