seichi-portal-frontend の開発に必要なツールは以下の通りです:
- Node.js v22.14.0
- pnpm v10.7.0
これらのツールは mise というツールを使用することでインストールすることができます。プロジェクトのルートディレクトリ上で以下のコマンドを実行してください。
mise install何らかの理由で mise が使用できない場合は個別でインストールすることもできますが、必ずバージョンを合わせるようにしてください。
環境変数は .env.example を参考に、.env.local ファイルを作成して設定してください。
| 環境変数名 | 意味 |
|---|---|
| NEXT_PUBLIC_MS_APP_CLIENT_ID | Microsoft アカウントログイン用の CLIENT ID |
| NEXT_PUBLIC_MS_APP_REDIRECT_URL | ログイン後にリダイレクトされるデフォルトの URL |
| NEXT_PUBLIC_BACKEND_SERVER_URL | seichi-portal-backend にアクセスできるリンク |
| NEXT_PUBLIC_DEBUG_MODE | デバッグモードを有効にします |
Tip
NEXT_PUBLIC_MS_APP_CLIENT_ID は Microsoft アカウントによる認証に必要な環境変数のため、 NEXT_PUBLIC_DEBUG_MODE が true のときは設定されていなくても問題ありません。
環境変数から設定できるデバッグモードは、Microsoft アカウントの認証を必要とせずにログインが必要なページを開くことできるようになるモードです。
Tip
デバッグモードは以下の条件がすべて満たされている必要があります
NEXT_PUBLIC_DEBUG_MODE(環境変数)がtrueに設定されていること- seichi-portal-backend がデバッグモードで起動されていること
- seichi-portal-frontend が開発モードで起動されていること(
pnpm run devコマンド)
基本的には src/app ディレクトリ配下に Next.js の App Router に従って page.tsx や route.ts を配置していきます。
src
├── app
│ ├── (authed)
│ ├── (unauthed)
│ └── api
├── components
├── features
│ ├── form
│ └── user
└── generic
認証が行われたあとにのみアクセスできるページがまとめられたディレクトリ
認証が行われる前にもアクセスできるページがまとめられたディレクトリ
主に、バックエンドと通信するときに必要な api を配置するディレクトリ
各ページを作成するときに必要なコンポーネントを配置するディレクトリ
TODO: 後で書く
プロジェクト全体で使用する共通の型を定義するディレクトリ
環境変数の設定と seichi-portal-backend を起動した後、以下のコマンドを実行してください
pnpm run devpnpm run prettypnpm run fmt:fixpnpm run fmt:fix