Next.jsのプロジェクトを作成する

前提

• Node.js LTSをインストール済み
• パッケージマネージャーはpnpmを使用

作成手順

1. ターミナルを開く
   Shift + Control + ^
2. プロジェクトのディレクトリに移動
   cd /path/to/your/project
3. アプリの作成

   pnpm create next-app@latest web
   

   • pnpm createはpnpm経由で公式のプロジェクト作成ツールを実行するコマンド
   • next-app@latestはNext.jsの最新安定版テンプレートを使う指定
   • 末尾のwebは作成されるプロジェクトのフォルダ名
4. 推奨設定の選択
   - 表示される質問は基本的に推奨設定を選ぶ
   - 例: "Would you like to use the recommended Next.js defaults?" -> Yes
5. 依存関係のインストール完了を待つ

作成後の構成

作成直後は主に次のような構成になります。

.
└─ web
  ├── .next
  │   └── types
  │       ├── cache-life.d.ts
  │       ├── routes.d.ts
  │       └── validator.ts
  ├── app
  │   ├── favicon.ico
  │   ├── globals.css
  │   ├── layout.tsx
  │   └── page.tsx
  ├── public
  │   ├── file.svg
  │   ├── globe.svg
  │   ├── next.svg
  │   ├── vercel.svg
  │   └── window.svg
  ├── .gitignore
  ├── eslint.config.mjs
  ├── next-env.d.ts
  ├── next.config.ts
  ├── package.json
  ├── pnpm-lock.yaml
  ├── pnpm-workspace.yaml
  ├── postcss.config.mjs
  ├── README.md
  └── tsconfig.json

• app/
  • ルーティングとUIの中核。page.tsxがトップページ
  • layout.tsxが共通レイアウト
  • globals.cssが全体スタイル
• public/
  • 画像やフォントなどの静的ファイル置き場
• next.config.ts
  • Next.jsの設定
• tsconfig.json
  • TypeScript設定
• eslint.config.mjs
  • ESLint設定

作成後に確認すること

cd web
pnpm dev

http://localhost:3000 にアクセスし、初期画面が表示されるか確認します。

終わりに

今回はNext.jsのプロジェクト作成についての記事でした。
次は公式に沿って適切なプロジェクト整理について学び、応用していきたいと思います。