今日から始めるNext.js～環境構築編～

Posted at 2025-05-18

What's Next.js?

Reactがライブラリ、ReactベースのフレームワークがNext.jsです。

環境構築をフロントエンド開発初心者視点で解説していきます。

VS CodeとNode.jsがインストールされていることです。

VSCodeを開き、どこかのディレクトリにフォルダを作成したのち、新しいターミナルを開きます。

プロジェクトを作成したいディレクトリで以下のコマンドを実行

npx create-next-app [プロジェクト名]

コマンドを実行すると以下の質問をされますので必要に応じて Yes or Noを選択しましょう。

Would you like to use TypeScript?
TypeScriptはJavaScriptの上位互換の言語
https://typescriptbook.jp/
Would you like to use ESLint?
ESLintは構文エラーやコーディング規約をチェックしてくれるツール
https://qiita.com/mzmz__02/items/63f2624e00c02be2f942
Would you like to use Tailwind CSS
Tailwind CSSはCSSのフレームワーク
https://zenn.dev/yohei_watanabe/books/c0b573713734b9/viewer/275f32
Would you like your code inside a src/ directory?
ディレクトリにsrcを含めるかどうか
Would you like to use App Router?
App Routerとはディレクトリ構造がそのままURLにしてくれる機能だそう
こちらの方の記事がわかりやすかったです
https://zenn.dev/blueish/articles/4b2ae3781ade57
Would you like to use Turbopack for next dev?
TurbopackはモジュールバンドラでTypeScriptやJavaScriptの依存関係を解決してくれるもの
読み込み時間を爆速にしてくれるそう
https://zenn.dev/rem/articles/864a6fe32e666c
インポートエイリアスは別コンポーネントなどを参照する際のパスを相対パスではなくて@をルートディレクトリとして扱ってくれます。
What import alias would you like configured?（6の質問をYesにすると聞かれる）
インポートエイリアスを以外にする場合は変えましょう

上記の質問に答えるとプロジェクトが作成されます。
質問の答えが間違っていた場合はctrl + Cでプロジェクト作成をキャンセルし、再作成しましょう。
※もしほかにいい方法がありましたらご指摘ください

cd [プロジェクト名]
npm run dev

cd→スペース入力→Tabキー入力でも候補を出してくれます。

プロジェクトが立ち上がれば以下にアクセスしてみてください。
Next.jsの画面が立ち上がれば成功です！
http://localhost:3000

ctrl + Cで終了します。