このプロジェクトは、Next.js App Routerを使用した最新のWeb開発のための包括的なボイラープレートです。
TypeScript、Tailwind CSS、Storybook、および様々な品質保証ツールが組み込まれています。
プロジェクトで使用している主な技術は以下の通りです。 詳細な技術スタックについてはこちらを参照してください。
- Next.js
- React
- TypeScript
- Tailwind CSS
- Storybook
- microCMS
プロジェクトで使用する環境変数を設定してください：
# .envファイルを作成
cp .env.example .env# pnpm使用推奨
pnpm install# Next.js開発サーバー
pnpm dev:next
# Storybook
pnpm dev:storybook
# または全て同時に起動
pnpm dev| ポート | 説明 |
|---|---|
| 3000 | Next.js開発サーバー |
| 6006 | Storybook開発サーバー |
# Next.jsのビルド
pnpm build:next
# Storybookのビルド
pnpm build:storybook
# または全て同時にビルド
pnpm build# Next.jsのビルドをプレビュー
pnpm start:next
# Storybookのビルドをプレビュー
pnpm start:storybook
# または全て同時にプレビュー
pnpm start| ポート | 説明 |
|---|---|
| 8000 | Next.jsのビルドプレビュー |
| 6008 | Storybookのビルドプレビュー |
このプロジェクトでは、Plopを使用してコンポーネントやページの自動生成ができます：
pnpm generate詳細な使用方法についてはPlopコードジェネレーターを参照してください。
このプロジェクトには多数のコード品質ツールが組み込まれています：
# リントチェック
pnpm lint:check
# リントチェック（自動修正）
pnpm lint:fix
# マークアップチェック
pnpm markuplint:check
# マークアップチェック（自動修正）
pnpm markuplint:fix
# フォーマットチェック
pnpm format:check
# フォーマットチェック（自動修正）
pnpm format:fix
# 型チェック
pnpm typecheck
# スペルチェック
pnpm spellcheck
# 全てのチェックを実行
pnpm quality:check
# 自動修正を適用
pnpm quality:fixGit commit時にはlefthookによる自動チェックが行われます。
このプロジェクトでは、以下のテストが実行できます：
# ユニットテスト
pnpm test:unit
# ユニットテストのカバレッジ
pnpm test:unit-coverage
# ユニットテストのブラウザUI
pnpm test:unit-uiプロジェクトのディレクトリ構造の詳細についてはディレクトリ構造を参照してください。
このプロジェクトには以下の詳細なドキュメントが用意されています：
- 技術スタック - 使用している技術とバージョン情報
- ディレクトリ構造 - プロジェクトのファイル構成
- コーディング規約 - 開発時の規約とガイドライン
- microCMSガイドライン - microCMS統合とコンテンツ管理の使用方法
- Plopコードジェネレーター - コンポーネント・ページ生成ツールの使用方法
- ユニットテストガイドライン - ユニットテストの実行方法とガイドライン
- Storybookテストガイドライン - Storybookテストの実行方法とガイドライン
- リリースプロセス - 自動リリースとバージョニングの仕組み
このプロジェクトのより詳細な情報、FAQ、ベストプラクティスについては、DeepWiki をご覧ください。
このプロジェクトでは、カレンダーバージョニング（YYYY.MM.DD形式）を使用した自動リリースシステムを採用しています。
詳細なリリースプロセスについてはリリースプロセスを参照してください。
このプロジェクトはStatic Exportを使用してデプロイできます。
Static Exportの詳細については、Next.jsのドキュメントを参照してください。
このプロジェクトはMITライセンスの下で公開されています。