その他 #1549
岡田 明日香 さんが約2ヶ月前に更新
# <span style="color: red;">総合環境構築手順</span> red;">総合手順</span>
### 概要
Dockerはpostgresとminio(S3の互換)のみ使用し、ローカルのNode.jsでNext.jsを起動する
メールは未実装
Vercelにデプロイする場合は[Resend](https://resend.com/)を使うことになると思いますが
EC2などデプロイし自前でメールサーバー動かす場合はNode.jsでnodemailerなども利用可能です
その場合はmailpitなどのコンテナを増やす必要あり
最近はAWS amplifyもいいみたいです
https://blog.ashcolor.jp/blog/programming/vercel-vs-amplify
### Node.js
`Node.js 20.11.0`
`pnpm 8.15.5`
### Volta
- 公式
https://volta.sh/
Voltaインストール済みの場合は自動で切り替わるためこの手順をスキップする
#### Macの方向け(Volta未インストールの場合)
パッケージ管理マネージャーとして`Volta`を利用する
もしnodebrewやローカルにNode.jsをインストールしている場合、アンインストールしてから下記を実行
(この機会に乗り換えたほうが良いと思います、プロジェクトによってNodeやnpm、yarnのバージョン切り替えが自動化出来ます)
※ローカルにインストールしている場合(Mac)の削除コマンド
```bash
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}
```
Voltaのセットアップ
```bash
brew install volta
volta setup
volta install node@20.11.0
volta install pnpm@8.15.5
volta install npm
```
**npmは今回は使いませんが、nodebrewやローカルnodeから乗り換えた人用に一応npmのinstallも一緒に書いています**
他プロジェクトでもVoltaを使うことでバージョンの切り替えが簡単になるため、この機会に乗り換えを推奨
## Git Clone
## 起動
```bash
### postgres起動
docker compose up -d
### node_modulesインストール
pnpm install
### seederを実行
pnpm db:seed
### 起動
pnpm dev
```
### アクセス
http://localhost:3000
デモユーザーでログイン
| メールアドレス | パスワード |
| ------------------ | ---------- |
| demo@apptime.co.jp | Demo1234 |
# <span style="color: red;">詳細情報</span>
server actionを用いたNext.jsフルスタックで開発(App router)
全てにおいて**最もネット上で情報が多い**王道なライブラリのみ選定
そのため、AIによるコーディングが非常に効率が良い
コーディング時は**Claude3.5 sonnet**のAI利用を推奨
※AIに質問する際は必ずプロンプトに「Next.js14 app router TypeScript shadcn Prismaを利用しています」のワードを含めること
| ライブラリ/フレームワーク | バージョン | |
| ------------------------- | ---------- | --- |
| TypeScript | 5.5.4 | |
| Next.js | 14 | |
| React | 18 | |
| Node.js | 20.11 | LTSの最新が20.11のためこのバージョンを利用。バージョン管理は`Volta`を推奨(自由なツールでOK) |
| Prisma | 5.18.0 | TypeScript用のORMです。SQLを簡単な記述で型安全に記述が可能 |
| Auth.js | 5@beta20 | 現状betaしかNext.js14では動かない |
| Jotai | | 状態管理ライブラリ |
| react-hook-form | | フォーム用のライブラリ |
| Zod | | バリデーション用ライブラリ |
| tailwindcss | | |
| shadcn/ui | | スタイル:new york テーマ:Zinc |
| PostgreSQL | 15 | |
戻る