初心者向け】Next.js 環境構築に挑戦！右も左も分からない私が生成AIに介護される話

こんにちは、Web 開発の世界に足を踏み入れたばかりの超初心者です！最近、Next.js っていうのがすごいらしいと聞いて、私もちょっと触ってみたくなりました。でも、いざ始めようと思っても、何から手を付ければいいのかサッパリ…。

そんな私が、初めて環境構築というものに挑戦した記録を、同じ初心者の方に向けてシェアしたいと思います！温かい目で見守ってください…！

今回の目標: Next.js の開発ができる環境を自分のPCに作ること！

私のPC: macOS

📦 1. まずは「必要ソフト」をインストールするらしい

なんか、開発に必要なソフトがいくつかあるみたいです。プロっぽい人がよく「Node.js」とか「Git」とか言ってるのを聞いたことがあるような…？

✅ Node.js (v18.x以上)

• 公式サイトへGO！ (https://nodejs.org/)
• いっぱいバージョンがあるけど、「LTS」って書いてあるやつを選べばいいのかな？とりあえずダウンロードして、言われるがままにインストール…完了！
• 本当に入ったか確認するコマンドがあるらしい。「ターミナル」っていう黒い画面を開いて…

node -v
npm -v

• エンターキーをターン！…お、なんか文字が出てきた！バージョンが表示されてるっぽいから、たぶんOK！ふぅ、一安心。

✅ Git

• こちらも公式サイトへ (https://git-scm.com/)
• 「Download for macOS」をポチッ。またもや「Next」連打でインストール完了！簡単じゃん！
• バージョン確認のコマンドも実行してみよう。

git --version

• またなんか出てきた！「git version x.xx.x」みたいな。よし、これも大丈夫そうだ！

✅ Visual Studio Code (エディタ)

• いよいよコードを書くためのソフト！ (https://code.visualstudio.com/)
• ダウンロードして、またまたインストール。
• おすすめの拡張機能…？「ESLint」と「Prettier」と「GitHub Copilot (任意)」…うーん、とりあえず全部入れとけ！拡張機能のマークをクリックして、検索して、インストール…ポチポチッとな。

📦 2. プロジェクトを取得する(Sourcetree )

次は「プロジェクトの取得」…？なんかゲームみたい。Sourcetree っていうソフトを使うらしい。

🔧 Sourcetree のインストール

1. 公式サイトへ (https://www.sourcetreeapp.com/)
2. 「Download for macOS」を…ポチッ。
3. インストーラーを起動して、アカウントでログイン…って、Atlassian アカウント？持ってないぞ！…あ、無料で登録できるのね。ふむふむ、登録完了！

🌱 リポジトリをクローン…って、コピーみたいなこと？ (Sourcetree の操作)

✅ 事前準備：GitHub リポジトリ URL を確認

• GitHub で「auto-slide-starter」っていうリポジトリを探して…あった！
• 緑色の「Code」ボタンをポチッ。SSH…？よく分からないけど、書いてあるURLをコピーっと。なんか鍵のマークが出てるけど、気にしないでおこう。
• パスワード…？あ、GitHub で作ったトークンってやつを入れるのか！確か前に作ったような…思い出して、ペースト！

🖱 クローン手順（Sourcetree 側）

1. Sourcetree を起動！
2. 左上の「Clone」ボタンを…クリック！
3. 「ソースパス / URL」にさっきコピーしたURLをペースト！
4. 「保存先のパス」…どこに保存すればいいんだろう？とりあえず「Documents」の中に「Projects」っていうフォルダを作って、その中に「auto-slide-starter」って入れとくか。
5. 「名前」は…自動で入った！そのまま「クローン」をポチッ！
6. うわ、なんか色々出てきた！でも、なんか終わったっぽい？ローカルリポジトリとして表示された…ふむふむ。

🖥 VS Code で開く

1. Sourcetree の画面で、さっきクローンしたやつを右クリック。「Finder で表示」をポチッ。
2. 開いたフォルダを右クリックして、「Visual Studio Code で開く」…ドキドキ。
3. VS Code が起動した！なんかプロっぽい画面だ…！

📁 3. プロジェクト構成を確認

ターミナルを開いて…

ls -1

エンター！

• package.json …なんか設定ファイルっぽい名前。
• app/ …アプリ？
• public/ …公開？

うーん、よく分からないけど、とりあえずファイルとフォルダがあるのは確認できた！

📦 4. 依存ライブラリのインストール

npm install

このコマンドをターミナルで実行！なんか文字がいっぱい流れてきた！エラーが出ませんように…ドキドキ…。

…しばらく待つと、なんか終わったっぽい？「node_modules」っていうフォルダがいつの間にかできてる！これがライブラリの集まりなのかな？

⚙️ 5. Next.js を起動してみる！

いよいよ最終段階！ちゃんと動くか試してみよう！

npm run dev

またターミナルに文字が…今度はなんか「http://localhost:3000」って出た！

ブラウザを開いて、ドキドキしながらこのURLを入力…エンター！

…

……

お！なんか出たー！「Hello Next.js!」って書いてある！やったー！ついに僕のパソコンで Next.js が動いた！感動！

📁 6. フォルダ構成

最後に、プロジェクトのフォルダ構成について説明が。

• app/ の中の layout.js が共通レイアウト？ page.js がトップページ？なるほど。
• public/ に画像とか入れるのね。
• node_modules/ は触っちゃダメ絶対！
• package.json は設定ファイルφ(..)メモメモ
• .git/ はバージョン管理の情報ね。

初めての環境構築を終えてみて…

正直、最初は専門用語ばっかりで何が何だか分からなかったし、gitでリポジトリを取得するのに手間取ったけど、生成AIに聞いてたらなんとかなりました！

生成AIさまさまです‥

今回、初めて Next.js の環境構築に挑戦してみて、Web 開発の第一歩を踏み出せた気がします！まだまだ分からないことだらけだけど、これから色々学んでいきたいです！

同じ初心者の方、一緒に頑張りましょうね！もしこの記事が少しでも参考になったら嬉しいです！