NextJSのプロジェクトを作成する

NextJS公式
https://nextjs.org/

 

ドキュメント
https://nextjs.org/docs

 

新規プロジェクト作成

公式 CLI を使う。

もしくは、Yarn なら、

 

質問	推奨回答
TypeScript を使いますか？	Yes（TypeScript推奨）
ESLint を使用しますか？	Yes
Tailwind CSS を使用しますか？	Yes（デザインが楽になります）
src/ ディレクトリ構造を使いますか？	Yes（今風）
App Router（app/ ディレクトリ）を使いますか？	Yes（Next.js 13+の推奨構成）
import alias の設定	そのままでOK（例：@/*）

 

 

ディレクトリ構成（App Router版）

my-next-app/
├─ src/
│  ├─ app/                  # App Router は src 配下
│  │  ├─ layout.tsx        # 全ページ共通レイアウト
│  │  ├─ page.tsx          # トップページ
│  │  └─ globals.css       # 全体スタイル（Tailwind もここで読み込み）
│  ├─ components/           # UI コンポーネント（任意）
│  └─ lib/                  # ユーティリティ（任意）
├─ public/                  # 画像・アイコン類
├─ .eslintrc.*              # ESLint 設定
├─ next.config.js
├─ package.json
└─ tsconfig.json            # `@/*` などのパスエイリアス設定

 

開発サーバー起動

 

アクセス
http://localhost:3000

 

ビルド & 本番起動