先生と生徒の会話形式で理解しよう

生徒

「Next.jsで作ったアプリを、インターネットで公開したいんですが、GitHubって必要なんですか？」

先生

「多くの場合、GitHubに公開するととても便利です。ソースコードの保存や共有が簡単になります。」

生徒

「パソコン初心者でもできますか？GitHubって難しそうで…」

先生

「大丈夫です。順番に進めれば、誰でもNext.jsのプロジェクトをGitHubに公開できます。」

1. Next.jsプロジェクトとGitHubの関係とは？

Next.jsは、Reactを使ってWebサイトやWebアプリを作るためのフレームワークです。作ったプログラムは、パソコンの中だけに保存していると、壊れたり消えたりする可能性があります。そこで役立つのがGitHubです。

GitHubは、プログラムの設計図をインターネット上に保管できるサービスです。例えるなら、学校のノートをクラウド上のロッカーに入れておくようなものです。Next.jsとGitHubを組み合わせることで、安全にコードを管理できます。

2. GitHubアカウントを準備しよう

Next.jsプロジェクトをGitHubに公開するには、GitHubのアカウントが必要です。GitHubは無料で使えるので、メールアドレスがあれば登録できます。

アカウント作成後は、自分専用のページが用意されます。このページが、あなたのプログラムを置く場所になります。初心者の方は「アカウント＝自分の本棚」と考えるとイメージしやすいです。

まずは、GitHubに公開するためのNext.jsプロジェクトが必要です。Next.jsでは、決まったコマンドを使うことで、すぐにひな形を作れます。


npx create-next-app my-next-app

（Next.jsの基本ファイルが自動で作成され、すぐに開発を始められる状態になります）

GitHubを使う前に「Git」という仕組みを少しだけ知っておきましょう。Gitは、ファイルの変更履歴を記録するための道具です。

例えば、作文を何度も書き直すとき、前の文章を残しておきたいことがあります。Gitは、その「前の状態」を自動で保存してくれる便利な仕組みです。

Next.jsのフォルダをGitで管理するには、初期設定を行います。この作業は「このフォルダを記録対象にします」とGitに伝えるイメージです。


git init
git add .
git commit -m "first commit"

（プロジェクトの現在の状態が保存され、変更履歴を管理できるようになります）

次に、GitHub上にリポジトリを作成します。リポジトリとは、プログラムを入れておく箱のようなものです。

GitHubの画面で「New Repository」を選び、名前を入力するだけで作成できます。説明文は空欄でも問題ありません。

ローカルのNext.jsプロジェクトと、GitHub上のリポジトリをつなげます。これにより、パソコンの中のデータをインターネットへ送れます。


git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git branch -M main
git push -u origin main

（GitHubのページを開くと、Next.jsのファイルが一覧で表示されます）

Next.jsプロジェクトをGitHubに公開すると、バックアップになるだけでなく、他の人に見てもらうこともできます。就職活動や学習の記録としても役立ちます。

また、別のパソコンでも同じ環境を再現できるため、作業の続きを簡単に行えます。これは初心者にとっても大きな安心材料です。