ロジコヤ

2. プロジェクト作成

Nextプロジェクト作成

プロジェクト構成

next-chat/
├── app/
├── eslint.config.mjs
├── lib/
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public/
├── server.mts
├── tailwind.config.ts
└── tsconfig.json

client：Next.js & Reactクライアントアプリ
server：Express & WebSocketサーバー

プロジェクト作成

VSCodeのターミナルを開き、npxコマンドでnext-chatプロジェクトを作成します。

npx create-next-app next-chat

設問

各種設問を選択します。基本的にすべてデフォルトの選択とします。

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? › No / Yes
✔ Would you like to use `src/` directory? › No / Yes
✔ Would you like to use App Router? (recommended) › No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes

項目	回答	説明
TypeScript	Yes	プログラミング言語
ESLint	Yes	コード静的解析ツール
Tailwind CSS	Yes	CSSフレームワーク
「src」ディレクトリを使うか	No	「page」ディレクトリを利用
App Router	Yes
import alias	No	tsconfig.jsonでコンポーネントパス設定

プロジェクトを開く

プロジェクト「next_chat」を新しいウィンドウで開きます。

ターミナル

code next-chat

ファイルの内容

パス	説明
`app/`	ページや API ルートを配置するディレクトリ
`app/page.tsx`	アプリケーションのエントリーポイントとなるページ
`app/layout.tsx`	全ページ共通のレイアウト（共通の UI 部品）
`prisma/`	Prisma 用設定（後で作成する予定）
`public/`	公開静的ファイル（画像など）
`styles/`	グローバル CSS（TailwindCSS の設定用など）
`next.config.js`	Next.js の設定ファイル
`tsconfig.json`	TypeScript の設定ファイル

App Directory

.jsx, .tsxはReactのページファイルで、Next.js 13からはappフォルダで管理します。

appフォルダ

パッケージインストール

パッケージ設定の確認

package.json には開発に必要なパッケージが追加されています。

package.json

{
  "name": "next-chat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "next": "15.1.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}