🔨
Next.jsの開発環境をささっと構築する
初めに
Next.jsを使ったアプリケーションを始めるにあたり、
環境構築をした時の備忘録をまとめます。
正直まとめるというほどのボリュームはないです…
前提
- Windows11
- Node v22.13.0
- npm 10.9.2
- Next.js 15.1.7
この記事でやること
- Next.jsのプロジェクト作成
- 起動確認
- 追加のライブラリインストール
- Gitローカルリポジトリ化
Next.jsのプロジェクト作成
プロジェクト作成のためにcreate-next-appを実行します。
実行後、いろいろな設定を聞かれるのでそれに回答すればプロジェクトが作成されます。
npx create-next-app project-name
# TypeScript(型つきJavaScript)を使うのでYesにした
✔ Would you like to use TypeScript with this project? ... No / Yes
# ESLint(静的解析ツール)を使うのでYesにした
✔ Would you like to use ESLint with this project? ... No / Yes
# Tailwind CSSを使うならYes
# CSSフレームワークだが、学習コストが少し高く感じたためNoにした
✔ Would you like to use Tailwind CSS? ... No / Yes
# Next.jsプロジェクト直下に配置するディレクトリにsrcディレクトリを利用するならYes
# ソースコードファイルが大量にできるのであったほうが良いと思われたためYesとした
✔ Would you like to use `src/` directory with this project? ... No / Yes
# App Routerを利用したかったのでYesにした
# 今後Next.jsはApp Routerを推すようなので理由がなければYesがよさそう
✔ Would you like to use App Router? (recommended) ... No / Yes
# Turbopackを`next dev`で使えるようにするならYes
# Noにしても"next dev --turbopack"で使えそうなのでどちらでもよさそうだがYesにした
# Turbopackはビルド時間を最適化し、開発環境でのパフォーマンスを向上させるものらしい
✔ Would you like to use Turbopack for `next dev`? ... No / Yes
# インポートエイリアスをカスタマイズするならYes
# モジュールをインポートする際通常は相対パスなどで指定するが、
# 分かりづらいのでエイリアスを使うことが普通らしい
# @/component/Buttonのようにアクセスできれば十分だと思うのでNoにした
✔ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
起動確認
以下のコマンドでNext.jsがlocalhost:3000で立ち上がることを確認します。
npm run dev
# 以下出力
> project-name@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.1.7 (Turbopack)
- Local: http://localhost:3000
- Network: http://XXX.XXX.XXX.XXX:3000
✓ Starting...
✓ Ready in 4.2s
http://localhost:3000 にアクセスすることでNext.jsの画面が出れば準備完了です。
追加のライブラリインストール
今回styled-componentsとreact-iconsを使おうと考えていたので
それも入れていきます。
npm install styled-components react-icons
Gitローカルリポジトリ化
Gitリポジトリで管理したいので初期化しておきます。
git init
これで現状の状態で初期コミットもされるはずです。
Discussion