【Next.js】最速で Next.js の開発環境を構築して表示までやる

結論

※Linux開発環境、node は入っている前提で進めます。入っていない方は【Windows】最速で WSL 開発環境を構築する #VSCode - Qiitaや、Node.js のバージョン管理にも使える mise がめっちゃ楽 - Qiitaを参考にしてみてください。

手順

1. ターミナルを立ち上げる
2. npx create-next-app@latest playground というコマンドを打つ
3. 質問を聞かれるので回答するか、分からなければ7回 Enter を連打して待つ（取り返しつきます）
4. Success! Created ~~~と表示されたら、cd playgroundコマンド
5. npm run devコマンド
6. ブラウザ（Chrome, edge, Safariなど）を起動して、localhost:3000と入力する

これで完了です！こんな画面が表示されましたか？

これが何も手を付けていない、ベースとなる Next.js 環境構築直後の画面となります。バージョンによって見た目が変わったりするので、まったく同じ画面じゃないかもしれません。

手順解説

1. ターミナルを立ち上げる

VSCode でもコマンドプロンプトでも PowerShell でも大丈夫です。そのまま開発するなら、VSCode が良いでしょう。

2. npx create-next-app@latest playground というコマンドを打つ

Node.js を入れたときに一緒に入る npx を利用します。
npx が入っているか確認しましょう。

npx -v

バージョンが表示されなかった場合は、下記のコマンドで npx をインストールしてください。

npm install -g npx

npx は、パッケージを実行してくれるツールで、パッケージをインストールし、実行、パッケージの削除までやってくれる便利なやつです。今回のように、最初の環境構築だけ使うようなパッケージのときによく登場します。

そんな npx を使用して、Next.jsの環境を構築します。

npx create-next-app@latest playground

解説するとこのようなかたち。

npx create-next-app@<バージョン> <お好きな名前>

npx を使って、create-next-app (Next.jsの環境を作ってくれるやつ)の latest(最新バージョン)を、playground(自分でつけたディレクトリ名)という名前で作ってねというコマンドになります。バージョン指定は省けますし、好きな名前でいいので、npx create-next-app osukina_nameでもいけます。

3. 質問を聞かれるので回答するか、分からなければ7回 Enter を連打して待つ（取り返しつきます）

それぞれ説明します。

? Would you like to use TypeScript? › No / Yes

　→　TypeScriptを使いますか？　いいえ／はい

JavaScriptのスーパーセットで、静的型付け言語である TypeScript にするかどうかを聞かれています。別に型定義とかいいよという方は No になります。お仕事とかで見かけるのはもうほとんど TypeScript なので、お仕事のプログラミングに興味がある方は何のことかわからなくても TypeScript を選んでおくことをおすすめします。

? Which linter would you like to use? › - Use arrow-keys. Return to submit.

❯ ESLint - More comprehensive lint rules
Biome - Fast formatter and linter (fewer rules)
None - Skip linter configuration

　→　リンターは何を使いますか？　ESLint／Biome／使わない

リンターとは、プログラムの静的解析ツールのことです。決められた書き方になっているか、問題は起きてないかというのを調べてくれるツールになります。ESLint が有名ですが、最近は新しく出てきて速度や利便性が高い Biome を採用するところも増えてきています。ここは好みで選んでいいでしょう。自分は今なら Biome を選ぶと思います。

? Would you like to use Tailwind CSS? › No / Yes

　→　Tailwind CSSを使いますか？　いいえ／はい

Tailwind CSSというのは、文字のサイズをいじったり、背景色をいじったりと、サイトのデザインをいじることができるCSSの、フレームワークの一つです。
Tailwind CSSは通常のCSSの書き方は異なるのですが、人気があります。ここも趣味で選んでよいですが、まず Web のことを勉強したいということであれば No が無難かと思います。ちなみに私は Tailwind CSS はあまり使ったことがないので No です。

? Would you like your code inside a src/ directory? › No / Yes

　→　src ディレクトリの中にコードを入れますか？　いいえ／はい

これは単純にディレクトリ配置について聞かれています。プロジェクトの一番上に入れるか、src の中に入れるか。個人的には src の中に入っているほうがとっちらからなくて良いと思います。

? Would you like to use App Router? (recommended) › No / Yes

　→　App Router を使いますか？　いいえ／はい

ここは recommended と書いてくれていますね。Next.jsには Page Router と App Router という二つの書き方があるのですが、App Router のほうが新しくできた記述方法なので、こちらのほうが何かと便利です。App Router を選んでおくことをお勧めします。

? Would you like to use Turbopack? (recommended) › No / Yes

　→　Turbopack を使いますか？　いいえ／はい

ここも recommended が付いていますね。Turbopack はNext.jsの開発も行っているvercel社が開発したバンドルツールです。簡単に言うと、ソースコードを全部一つにまとめるツールです。Webpack が有名ですが、こちらはかなり古くなってきたので、スピードの問題を解決するために作られた Webpack の後継である Turbopack をお勧めします。かなり早いです。

? Would you like to customize the import alias (@/* by default)? › No / Yes

　→　import するときのエイリアス（デフォルトは @/*）をカスタマイズしますか？　いいえ／はい

開発していく中で、他のファイルに書いたソースコードを読み込みたい時があります。そんなときに使われる import 文ですが、これを記述する際に、相対パスにするか絶対パスにするかと言われると、かなりの確率で絶対パスで記述することになります。そのときの起点となるところを@で書くことができるようにするよというのがこちらの設定になります。

4. Success! Created ~~~と表示されたら、cd playgroundコマンド

コマンドを打って、質問に回答するとインストールが始まります。

npx create-next-app@latest playground

✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Creating a new Next.js app in /home/user_0/playground.

Using npm.

Initializing project with template: app 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- @eslint/eslintrc


added 352 packages, and audited 353 packages in 24s

151 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created playground at /home/user_0/playground

設定ミスったら慎重に、とても慎重に rm -rf <該当のディレクトリ> で消してやり直せば大丈夫です。権限がなかったらsudo rm -rf <該当のディレクトリ>で。本当にまっさらに消えるので気を付けて。

無事に Success! すると、自分が今いるディレクトリに Next.js のプロジェクトが作成されるので移動します。

cd playground

重ねてになりますが、playground は例でつけた名前で、実際には自分がつけた名前に置き換えて記述してください。

5. npm run devコマンド

npm run dev

画面を立ち上げるよというコマンドです。自動で作られたファイルの package.json 内にある scripts というところに記述されています。気になる方はほかのコマンドも調べてみると勉強になります。

6. ブラウザ（Chrome, edge, Safariなど）を起動して、localhost:3000と入力する

Next.js はデフォルトで PORT 3000 へ出力するようになっています。

これにて完成です！

はじめの一歩

文字を変えてみる

Ctrl + Shift + F で検索がでるので、画面に表示されている単語で検索してみましょう。

ここのGet started ~~~のところを書き換えると、表示されているlocalhost:3000側の文字が書き換わります。

色を変えてみる

App Routerを選び、Tailwind CSS で No した方限定ですが、参考程度に。

src/app/page.module.css

というファイルを開きます。ファイルの一番下に、以下を追記してください。

.main li {
  font-size: 30px;
  color: yellow
}

文字が大きく、そして黄色くなりましたね。

非常に簡単ではありますが、自分でもサイトを作りかえることができるんだということがわかると、ワクワクしてきますよね！

まとめ

Next.js の環境構築と、とても簡単ではありますがサイトの作りかえについて解説しました。
フロントエンドの開発は自分でいじったところがすぐに結果として見ることができるのが魅力だと思うので、ぜひいろいろ触ってみていじってみてください！