Prisma에 Next-auth 연결하기

https://authjs.dev/reference/adapter/prisma

명령어

npm install next-auth @prisma/client @next-auth/prisma-adapter

npm install bcrypt

npm install -D @types/bcrypt

Prisma 인스턴스를 globalThis에 저장해 놓는다.

• 🗃️ prisma를 전역객체인 globalthis에다 선언을 한다.

// libs/prismadb.ts

import { PrismaClient } from '@prisma/client';

declare global {
  var prisma: PrismaClient | undefined;
}

// next.js의 dev 환경에서 hot reload에서 에러를 방지하기 위하여, globalThis의 prisma라는 변수에 client를 할당 하였다.
const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalThis.prisma = client;

export default client;

현재 시점에서 Prisma를 이용하기 위해서는 pages 폴더를 만들어야한다.

//pages/api/[...nextauth].ts

실제 회원가입하는 백엔드 API를 만들어보자. (app-router의 api 폴더에)

//app/api/register/route.ts

import bcrypt from 'bcrypt';

import prisma from '@/app/libs/prismadb';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
	// 클라이언트에서 받은 데이터를 body라는 변수에 저장.
  const body = await request.json();
  const { email, name, password } = body;

  const hashedPassword = await bcrypt.hash(password, 12);

  // 실제 DB에 새로운 데이터 저장.
  const user = await prisma.user.create({
    data: {
      email,
      name,
      hashedPassword,
    },
  });

  return NextResponse.json(user);
}

실제 회원 가입 시도!