【初心者向け】Next.jsとGitHubの環境構築【Mac】

2025年9月21日

当ページのリンクには広告が含まれています。

僕の作業環境

MacbookAir M4 (macOS Sequoia 15.5)
Cursor 1.5.11
Node.js v22.19.0
npm・npx v10.9.3

Webアプリ開発を始めてみたいけれど、「環境構築が難しそう…」と感じていませんか？

本記事では、初心者でも迷わずできるNext.js の環境構築と GitHub へのアップロード手順を、画像やコマンド例を交えながら解説します。

開発の第一歩を踏み出すために、必要なツールの準備から実際に動かすところまでを一緒にやっていきましょう

事前準備

まずは、開発を始める前に必要なツールを用意していきましょう。

今回の環境構築に必要なのは以下の3つです。

環境構築の順番

GitHub アカウント
Node.js
エディタ（今回はCursor）

それぞれ順番に準備していきます。

GitHubの新規登録

まだアカウントを持っていない方は、以下のリンクから新規登録を行いましょう。

Node.jsのインストール

Next.js を動かすためには Node.js が必要です。

公式サイトから最新版（推奨版 / LTS）をダウンロードしてインストールしてください。

インストールが完了したら、ターミナルで以下を実行して確認します。

node -v
npm -v

バージョンが表示されれば問題なく、インストールされています。

Cursorのインストール

開発を効率化するためのエディタとして、今回はCursorを使用します。

もちろんVSCodeなど他のエディタでも問題ありませんが、AI 補助が強力なので初心者にもおすすめです。

GitHub リポジトリ作成

Next.js GitHub Environment construction 1

事前準備が終わったら、下記の手順でGitHub上にリポジトリ作成していきます。

リポジトリ作成

GitHub にログイン
右上の 「＋」 ボタンをクリック
「New repository」 を選択
Repository nameを入力（例：hogeProject）
Descriptionを入力（例：未記入）
Choose visibilityを選択（例：Private）
Add READMEを選択（例：Off）
Add .gitignoreを選択（例：No .gitignore）
Add licenseを選択（例：No license）
「Create repository」をクリック

Next.js GitHub Environment construction 2

これで初期状態のリポジトリが作成されます。

...or create a new repository on the command lineのコマンドをコピーしておきます。

Next.js プロジェクト作成

次に、Next.jsのプロジェクトを作成していきます。

Next.js のプロジェクトを作成する際には、CursorやVSCodeのターミナルで以下のコマンドを実行します。

npx create-next-app@latest

いくつかの質問が表示されます。解答例と意味を整理すると次のようになります。

プロジェクト作成

What is your project named? … hoge
プロジェクト名を入力（例：hoge）
Would you like to use TypeScript? … No / Yes
型チェックが導入されているTypeScriptを実装するか選択（Yesを推奨）
Which linter would you like to use? › ESLint
コードの品質チェックツールの選択（こだわりがなければESLint）
Would you like to use Tailwind CSS? … No / Yes
CSSフレームワークにTailwindCSSを実装するか選択（こだわりがなければYes）
Would you like your code inside a src/ directory? … No / Yes
ソースコードをsrc/ディレクトリにまとめるかどうか選択（Yesを推奨）
Would you like to use App Router? (recommended) … No / Yes
Next.js15から推奨されている新しいルーティング方式か選択（Yesを推奨）
Would you like to use Turbopack? (recommended) … No / Yes
ビルドを高速化するツールを実装するか選択（こだわりがなければYes）
Would you like to customize the import alias (@/* by default)? … No / Yes
インポート時のエイリアスをカスタマイズするか選択（こだわりがなければNo）

質問への回答が終わると、必要なパッケージがインストールされてプロジェクトが生成されます。

リポジトリとプロジェクトを紐付け

最後に、GitHubのリポジトリとNext.jsのプロジェクトを紐付けをします。

先ほど、コピーしておいたGitHubのコマンドを、CursorやVscodeのターミナルにペーストします。

cd {作成したディレクトリパス(例：hoge)}
echo "# hogeProject" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{username}/{projectname}.git
git push -u origin main

コマンドが問題なく実行されたら、無事にリポジトリとプロジェクトの紐付けが終わりました。

先ほどのGitHubのページをリダイレクトすると、下記のような現時点のファイルが反映されます。