内容

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のプログラミングやデバックをする際は必ず触るルーティンになりますので、覚えておきましょう。