Next.js 기초 <8. Next.js 15와 데이터베이스 연동 (MongoDB, PostgreSQL, Prisma 활용)>

넥스트 Next.js

8. Next.js 15와 데이터베이스 연동 (MongoDB, PostgreSQL, Prisma 활용) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 데이터베이스 연동이 필요한 이유

Next.js는 풀스택 웹 프레임워크로서 서버 기능(API Routes)과 데이터베이스 연동을 쉽게 지원한다.
백엔드 서버 없이도 MongoDB, PostgreSQL, MySQL 등 다양한 데이터베이스와 연결 가능하며,
ORM(Object Relational Mapping)인 Prisma를 사용하면 데이터 관리를 더욱 쉽게 할 수 있다.

📌 Next.js 15에서 데이터베이스 연동 방식
✔ API Routes (app/api/)를 활용하여 백엔드 서버 없이 데이터베이스 연동 가능
✔ Prisma를 사용하면 SQL 없이도 DB 조작 가능 (PostgreSQL, MySQL, SQLite 등 지원)
✔ Mongoose를 활용하여 MongoDB 연동 가능
✔ ORM을 사용하면 데이터 검증, 마이그레이션이 쉬워지고 코드 관리가 용이해짐

✅ 데이터베이스 선택 가이드

데이터베이스특징추천 사용 예시

MongoDB	NoSQL 문서형 DB, JSON 기반	채팅 앱, IoT 데이터, 로그 저장
PostgreSQL	관계형 데이터베이스(SQL), 트랜잭션 지원	전자상거래, 금융 시스템, 복잡한 쿼리
MySQL	가장 널리 사용되는 관계형 DB	블로그, CMS, 일반적인 웹 서비스
SQLite	파일 기반 경량 DB, 별도 서버 필요 없음	모바일 앱, 로컬 개발 테스트

📌 Next.js 15에서는 PostgreSQL 또는 MongoDB와 Prisma를 함께 사용하는 것이 일반적!

---

2. Next.js 15에서 Prisma와 PostgreSQL 설정하기

✅ 1) PostgreSQL 데이터베이스 설정 (Docker 사용)

$ docker run --name postgres -e POSTGRES_USER=admin -e POSTGRES_PASSWORD=secret -p 5432:5432 -d postgres

📌 로컬에서 PostgreSQL을 실행하려면 Docker를 사용하는 것이 편리함!

✅ 2) Prisma 설치 및 초기화

$ npm install @prisma/client
$ npx prisma init

📌 Prisma를 설치하면 prisma/schema.prisma 파일이 생성됨!

✅ 3) Prisma 스키마 설정 (prisma/schema.prisma)

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id    String @id @default(uuid())
  name  String
  email String @unique
}

📌 PostgreSQL을 사용하며, User 모델을 생성하여 데이터베이스 테이블을 정의!

✅ 4) 데이터베이스 마이그레이션 실행

$ npx prisma migrate dev --name init

📌 마이그레이션을 실행하면 데이터베이스 테이블이 자동으로 생성됨!

✅ 5) Prisma Client 사용을 위한 초기 설정 (lib/prisma.ts)

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

const prisma = new PrismaClient();
export default prisma;

📌 Prisma Client를 전역에서 쉽게 사용할 수 있도록 설정!

---

✅ 여기까지 Next.js 15에서 Prisma와 PostgreSQL을 설정하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Prisma를 활용하여 데이터를 삽입하고 조회하는 방법은?"
✅ 2부에서 Next.js 15 API Routes와 Prisma를 활용한 CRUD를 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Next.js 15에서 API Routes와 Prisma를 활용한 CRUD

✅ 1) 사용자 데이터 추가 (POST API) (app/api/users/route.ts)

import prisma from "@/lib/prisma";

export async function POST(req: Request) {
  const { name, email } = await req.json();
  const user = await prisma.user.create({
    data: { name, email },
  });

  return new Response(JSON.stringify(user), {
    headers: { "Content-Type": "application/json" },
    status: 201,
  });
}

📌 POST 요청을 통해 새로운 사용자를 데이터베이스에 추가!

✅ 2) 모든 사용자 조회 (GET API) (app/api/users/route.ts)

export async function GET() {
  const users = await prisma.user.findMany();
  return new Response(JSON.stringify(users), {
    headers: { "Content-Type": "application/json" },
    status: 200,
  });
}

📌 GET 요청을 통해 모든 사용자 정보를 조회!

✅ 3) 특정 사용자 조회 (GET API) (app/api/users/[id]/route.ts)

export async function GET(req: Request, { params }: { params: { id: string } }) {
  const user = await prisma.user.findUnique({
    where: { id: params.id },
  });

  if (!user) {
    return new Response(JSON.stringify({ error: "User not found" }), { status: 404 });
  }

  return new Response(JSON.stringify(user), {
    headers: { "Content-Type": "application/json" },
    status: 200,
  });
}

📌 동적 라우팅을 활용하여 특정 ID의 사용자 정보를 조회 가능!

✅ 4) 사용자 정보 업데이트 (PUT API) (app/api/users/[id]/route.ts)

export async function PUT(req: Request, { params }: { params: { id: string } }) {
  const { name, email } = await req.json();
  const updatedUser = await prisma.user.update({
    where: { id: params.id },
    data: { name, email },
  });

  return new Response(JSON.stringify(updatedUser), {
    headers: { "Content-Type": "application/json" },
    status: 200,
  });
}

📌 PUT 요청을 통해 사용자 정보를 업데이트 가능!

✅ 5) 사용자 삭제 (DELETE API) (app/api/users/[id]/route.ts)

export async function DELETE(req: Request, { params }: { params: { id: string } }) {
  await prisma.user.delete({
    where: { id: params.id },
  });

  return new Response(null, { status: 204 });
}

📌 DELETE 요청을 통해 특정 사용자를 삭제 가능!

---

2. Next.js 15에서 클라이언트에서 API 호출하여 데이터 가져오기

✅ 1) 클라이언트에서 사용자 목록 가져오기 (app/users/page.tsx)

async function getUsers() {
  const res = await fetch("/api/users");
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <main>
      <h1>👥 사용자 목록</h1>
      <ul>
        {users.map((user: any) => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </main>
  );
}

📌 클라이언트에서 서버 API를 호출하여 사용자 목록을 가져올 수 있음!

✅ 2) 클라이언트에서 새로운 사용자 추가하기 (app/users/create/page.tsx)

"use client";

import { useState } from "react";

export default function CreateUser() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    await fetch("/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email }),
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="이름" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="이메일" />
      <button type="submit">추가</button>
    </form>
  );
}

📌 클라이언트에서 직접 데이터를 입력하고 API를 통해 추가 가능!

---

✅ 여기까지 Next.js 15에서 API Routes를 활용한 백엔드 구축 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 사용자 인증 시스템은 어떻게 구현할까?"
✅ 다음 회차에서 Next.js 15에서 JWT, OAuth, NextAuth.js를 활용한 사용자 인증 방법을 배워봅시다!