Next.jsのフルスタックテンプレート

(App Router), TailWind CSS, NextAuth v5, PostgreSQL, Prisma が使えるテンプレートです

• frontend : Next.js(App Router)
• backend : Next.js Route Handler
• auth : NextAuth v5
• db ORM : PostgreSQL, Prisma
• css : TailWind CSS
• formatter : Prettier, ESLint

NextAuthは初期でGoogle認証を設定されていますがOAuthの環境変数を設定する必要がありますNextAuth v5 Documentation

開発手順

1.npmパッケージのインストール

$ npm i

2.環境変数の設定

もし認証を使わない場合は無視してください

$ cp .env.local.example .env.local

先述したようにNextAuthの環境変数を設定してください

AUTH_GOOGLE_ID="*****************************************"
AUTH_GOOGLE_SECRET="*****************************************"
AUTH_SECRET=*****************************************

3.Dockerの起動

$ docker-compose up -d

4.Prismaのセットアップ

$ npx prisma migrate dev
$ npx prisma generate

5.開発サーバーの起動

$ npm run dev

Webサーバーはhttp://localhost:3000でアクセスできます

開発

初期ページ

localhost:3000が初期ページです 初期ページにはログイン、ログアウトボタンが表示されます ログインするとユーザーのセッション情報が表示されます

/todoにアクセスすると開発の例としてTodoリストが表示されます

Prisma

Prismaのスキーマを変更した場合は以下のコマンドを実行してください

$ npx prisma db push
$ npx prisma generate

Prismaのdbの確認は以下のコマンドを実行してください

$ npx prisma studio

localhost:5555でアクセスできます

認証

他の認証プロバイダーを使いたい場合はNextAuth v5 Documentationを参照してください