0. 全体像
最終的なディレクトリ構成
Assertion_Check/
├── .github/
│ └── workflows/
│ └── ci.yml # CI（GitHub Actions）
├── frontend/ # Next.js
├── backend/ # Hono
├── .nvmrc # Node.js のバージョン指定（24）
├── .gitignore
└── README.md
構成のポイント
- 1つのリポジトリで
frontend/ / backend/ を管理する（モノレポ）
- Turborepoなどのモノレポ管理ツールは使わず、フォルダを分けるだけのシンプルな構成にした
frontend/ と backend/ はそれぞれ独立した package.json を持ち、別々に npm install する
使用技術とバージョン
| 対象 |
技術 |
バージョン |
| 共通 |
Node.js |
24 |
| frontend |
Next.js（App Router） |
16 |
| frontend |
React |
19 |
| frontend |
Tailwind CSS |
4 |
| backend |
Hono |
4 |
| 共通 |
TypeScript |
frontend 5 / backend 6.0 |
| 共通 |
ESLint |
frontend 9 / backend 10 |
| CI |
GitHub Actions |
checkout@v7 / setup-node@v7 |
将来の本番構成（予定）
Next.js
↓
Amazon API Gateway
↓
AWS Lambda
↓
Hono
- AI分析：Amazon Bedrock
- DB：Amazon RDS for PostgreSQL
- 認証：Amazon Cognito
1. フロントエンド（Next.js）の構築
1-1. プロジェクト作成
npx create-next-app@latest frontend \
--ts --tailwind --eslint --app --src-dir \
--import-alias "@/*" --use-npm --turbopack \
--no-react-compiler --disable-git --yes
| オプション |
意味 |
--ts |
TypeScriptを使う |
--tailwind |
Tailwind CSSを導入する |
--eslint |
ESLintを導入する |
--app |
App Routerを使う |
--src-dir |
ソースコードを src/ 配下に置く |
--import-alias "@/*" |
@/components/... のような絶対パスでimportできるようにする |
--use-npm |
パッケージマネージャーにnpmを使う |
--disable-git |
リポジトリのルートですでにGitを使っているため、frontend/ 内で git init しない |
--yes |
対話形式の質問をスキップする |
1-2. 環境変数の設定