[Next.js15][Mac]npmを使ってnext.js15をインストールする方法とローカルサーバーを立ち上げる方法[超初心者向け]
内容
npmを使った、Next.js（最新版）のインストール方法とローカルサーバーを立ち上げる方法
対象
- 初めてNext.jsを触る人
- プログラミング初心者さん
得られる知識
- Next.jsをインストールして、パッケージファイルを作成できるようになる。
- Next.jsのローカルサーバーを立ち上げることができる。
筆者の環境仕様
'24/12/7 現在
| カテゴリ | 技術 |
|---|---|
| PC | Mac M1 |
| OS | macOS Sequoia 15.1.1 |
| node.js | version 10.8.2 |
| next.js | version 15.0.4 |
| Text editor | Wind Surf |
手順
- node.jsをインストール
- ターミナルでディレクトリを作成する
- next.jsをインストールする
- エディタを立ち上げる
- ローカルホストを立ち上げる
- 表示されるので、ローカルホストを閉じる。
- 結論
1. node.jsをインストール
主にJavascript周りを初めて触る方だと思いますが、過去にnode.jsを使ったことない方はインストールから始めてください。
インストールできているかの確認の方法
$ npm -v //ここを入力
10.8.2 //結果
2. ターミナルでディレクトリを作成
デスクトップ上などで作ってもらっても構いませんが、慣れるとターミナルの方が早いのでこちらを採用しています。
$ mkdir sampledev
$ cd sampledev
3. next.jsをインストールする
ここでは、先ほど作成した、sampledevというファイルの中にnext.jsをインストールしていきたいと思います。
$ sampledev % npx create-next-app@latest //ここを入力
Need to install the following packages:
create-next-app@15.0.4
Ok to proceed? (y) y //Yesという意味のyを入力
✔ What is your project named? … . //"."と入力することでディレクトリ直下に作成できます
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias (@/* by default)? … Yes
✔ What import alias would you like configured? … @/*
質問を数点聞かれますが、細かい仕様のカスタマイズなので、今回のは説明を割愛します。
とりあえず全部yesでもnoでも大丈夫です。（そのうち別記事で書くかもしれません。）
ここでよくあるミスは、npxをnpmと書きまちがるところです。確認してみてください。
4.エディタで立ち上げる
コマンド設定がしてある方はターミナルからそのまま立ち上げてもらっても構いません。
例:Wind Surfで立ち上げる場合
$ sampledev % windsurf .
設定していない方は通常通り、VScodeやCursorなどのテキストエディタをデスクトップ等から開いてください。
立ち上がったら、上のバーから"ターミナル"を選択して、ターミナルを立ち上げてください。
5.ローカルホストを立ち上げる
そのあと、ターミナルでnpm run devと入力してもらうと、ローカルサーバーが立ち上がります。
$ sampledev % npm run dev
自分の場合ですと、ローカルホスト3000番に立ち上がったようなので、Chromeで開いていきます。
このように、デフォルトでNext.jsのページが開けば完了です。
6.表示されるので、ローカルホストを閉じる。
基本的には、動作確認をしたらローカルホストは閉じた方がいいです。
理由としては、動作でメモリを食うので、他の作業に支障が出る場合があるからです。
今後Dockerでクラウド上のコンテナを生成したり、動画をアップロードしたりなど、メモリをシビアに使う状況で生きてくることがありますので、癖にしておくことをオススメします。
閉じ方としては、ターミナルを落とすか、control+cで落とすことができます。
結論
Next.jsのファイルをインストールして、ローカルサーバーを立ち上げることができた。
Next.jsのプログラミングやデバックをする際は必ず触るルーティンになりますので、覚えておきましょう。
Discussion