/skelton-nextjs-prisma-app

Primary LanguageTypeScript

skelton-nextjs-prisma-app

コレは個人の勉強用に作成したアプリの雛形です。

構成

  • Next.js
  • NextAuth.js
    • Google OAuth
  • Prisma
    • Planet Scale

用意しているもの

画面

ページ名 パス 認証
トップページ / -
ログイン画面 /login -
ダッシュボード画面 /dashboard ○
サービスの状態を返す /api/stats -
プロフィールを返す /api/me ○

認証状態に応じたルーティング

/pages/_middleware.ts 内にログイン状態で特定のページにアクセスした時にリダイレクトをする処理がいくつかあります。

プロジェクトの作成

$npx create-next-app --example https://github.com/fukata/skelton-nextjs-prisma-app/tree/main sample-app

開発方法

.env の作成

.env ファイルを .env.sample を参考に作成します。

Planet Scaleのデータベース、ブランチを作成（初回のみ）

データベースを作成

$pscale database create sample-app --region ap-northeast

ブランチを作成（dev、shadow）

$pscale branch create sample-app dev
$pscale branch create sample-app shadow

Planet Scaleを起動

２つのターミナルで下記のコマンドを実行します。

ターミナル１

$pscale connect sample-app dev --port 3309

ターミナル２

$pscale connect sample-app shadow --port 3310

マイグレーション

$npx prisma migrate dev

アプリを起動

$yarn dev

Heroku で動かす場合

  • ClearDB (MySQL)を使用します。
    • 環境変数を設定します。
    • $ heroku config:set DATABASE_URL=<CLEARDB_DATABASE_URLの値>
  • その他の環境変数も .env.sample を参考に設定します。
  • Procfileが既にあるので Github 等と連携すればデプロイが行われるはずです。

Tips

Prismaのログを見たい時

Debugging (Reference) - Prisma Docs

$DEBUG="*" yarn dev