簡単な環境構築
簡単に環境構築する手順
備忘録がてら、簡単にnext.jsの環境構築する手順まとめ
前提
- Next.js
- Biome使用
- TypeScript使用
- pnpm使用
- SourceTreeで開くところまで
1. プロジェクトフォルダの作成
Finderなどで任意の場所にディレクトリ作成
2. プロジェクトの作成
一括指定
1で用意したディレクトリ内に移動して下記を実行（またはエディタで当該ディレクトリを開く）
npx create-next-app@latest . --ts --tailwind --biome --app --import-alias "@/*" --use-pnpm
pnpm devhttp://localhost:3000 開いて確認
--ts
TypeScriptで作る .jsじゃなくて .ts / .tsx
--tailwind
Tailwind CSSを最初から入れる tailwind.config.ts など自動生成
--biome
Biomeを入れる
--app
App Router構成にする（/app ディレクトリ方式）
--import-alias "@/*"
パスエイリアス設定
import Button from "../../../components/Button"をimport Button from "@/components/Button"と書けるようになる
--use-pnpm
パッケージマネージャをpnpmにする
注意事項（2026.3.31時点）
最近は下記が聞かれる。
% npx create-next-app@latest . --ts --tailwind --biome --app --import-alias "@/*" --use-pnpm
Need to install the following packages:
create-next-app@16.2.1
Ok to proceed? (y) y
? Would you like to use React Compiler? › No / Yes=> Next.js最新系で追加されたもので、Reactのパフォーマンス最適化を自動でやる仕組みだがまだ新しいため、「No」でいい様子
? Would you like your code inside a `src/` directory? › No / Yes=> srcディレクトリ配下に作成するかどうか。作成しないとpackage.jsonなどの設定ファイルと混ざるので「Yes」でOK
? Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? › No / Yes=> AI（コード生成ツール。CopilotやCursorエージェント）向けのルールブックを作成するかどうか。あっても困らないので「Yes」でOK
ちなみに、通常手順は下記
基本として、Next.jsのテンプレを使って環境構築する場合のコマンドは下記
npx create-next-app@latest .- npx：インストールせずに一時的に実行
- create-next-app@latest：最新のNext.jsテンプレを使う
- .：今いるディレクトリに作る
しかし、上記だと対話形式で各種オプション設定が必要
2. Git 初期化
基本は不要。
初期化状態の確認
下記と出たら未初期化のため必要
% git status
fatal: not a git repository
%初期化
git init3. .gitignore確認
既に.gitignoreは作成済みだが、下記が書かれていることを確認
- node_modules
- .next
- .env
4. 初回コミット
基本は不要。（create-next-app が 初回コミットまでやっているため）
git add .
git commit -m "init: create next app"コミット済みかの確認
下記が出ていれば初回コミット済み
% git log --oneline
81e8636 (HEAD -> main) Initial commit from Create Next App
%5. Githubリポジトリ作成
ブラウザで GitHub にアクセス
- 「New repository」
- 名前：任意だが、作成したプロジェクトディレクトリ名に合わせるのが一般的
- READMEは作らない（重要）
6. リモート接続
GitHubで表示される通りで良い
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git branch -M main
git push -u origin mainこちらで連携完了
7. SourceTreeで開く
新規 > 「既存のローカルリポジトリを開く」