この最小構成のNext.jsアプリケーションは、Next.jsを始めたばかりの開発者が基本的な構造を理解するためのテンプレートです。App Routerを使用して、モダンなNext.jsの機能を体験できます。
- Node.js 18.17.0以上
- npm、yarn、またはpnpm
- リポジトリをクローンする：
git clone <リポジトリURL>
cd jank3n- 依存関係をインストールする：
pnpm install- 開発サーバーを起動する：
pnpm dev- ブラウザでhttp://localhost:3000にアクセスして、アプリケーションを確認
src/
├── app/ # App Router
│ ├── api/ # APIルート (サーバーサイド)
│ │ └── hello/
│ │ └── route.ts # シンプルなAPI例
│ ├── favicon.ico # ファビコン
│ ├── globals.css # グローバルCSS
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # Home (root) page
│ └── example/ # example path
│ └── page.tsx # example page
│
├── components/ # 共通コンポーネント
│ ├── ui/ # 基本UI要素
│ │ └── Button.tsx # ボタンコンポーネント例
│ └── layout/ # レイアウト関連
│ ├── Footer.tsx # フッターコンポーネント
│ └── Header.tsx # ヘッダーコンポーネント
│
└── lib/ # ユーティリティ
└── utils.ts # 汎用ユーティリティ関数
Next.js 13以降では、app/ディレクトリを使用したルーティングシステムが導入されました。これはファイルベースのルーティングで、ディレクトリ構造がそのままURLパスになります。
app/page.tsx→/(ルートURL)app/about/page.tsx→/aboutapp/users/[id]/page.tsx→/users/1,/users/2など (動的ルート)
layout.tsxファイルは、そのディレクトリとその子ディレクトリのすべてのページに共通のUIを定義します。ルートレイアウト(app/layout.tsx)はすべてのページに適用されます。
App Routerのページはデフォルトでサーバーコンポーネントとして動作します。これにより、データの取得や重い処理をサーバー側で行い、クライアントに必要な最小限のJavaScriptを送信できます。
インタラクティブな機能が必要な場合は、ファイルの先頭に'use client'ディレクティブを追加することで、クライアントコンポーネントを作成できます：
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}app/apiディレクトリ内にroute.tsファイルを作成することで、サーバーサイドのAPIエンドポイントを定義できます。例えば：
// app/api/users/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
// ユーザーデータを取得する処理
return NextResponse.json({ users: [...] })
}
export async function POST(request: Request) {
const data = await request.json()
// 新しいユーザーを作成する処理
return NextResponse.json({ success: true }, { status: 201 })
}app/ディレクトリ内に新しいディレクトリを作成します（例：app/about/）- その中に
page.tsxファイルを作成します：
// app/about/page.tsx
export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>This is the about page.</p>
</div>
)
}これで、/aboutパスにアクセスすると新しいページが表示されます。
このプロジェクトは最小構成ですが、以下のように拡張できます：
- 新機能の追加: 新しいページやAPIエンドポイントを作成
- 状態管理: 必要に応じてReduxやZustandなどの状態管理ライブラリを追加
- データベース連携: PrismaやMongoose、Firebase SDKなどを使用してデータベースと接続
- 認証: NextAuth.jsを使用して認証機能を実装
- 機能ベースの構成: 大規模になったら、
features/ディレクトリを追加して機能ごとにコードを整理
このテンプレートをベースに、実際のプロジェクトに必要な機能を徐々に追加していくことをお勧めします。