Next.js는 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 지원하는 React 프레임워크입니다. 이러한 특징을 활용하여 Next.js 프로젝트에서 데이터베이스와의 연동을 구현하는 방법을 알아보겠습니다.

1. 데이터베이스 선택

먼저, Next.js에서 데이터베이스와의 연동을 구현하기 전에 어떤 데이터베이스를 사용할지 결정해야 합니다. 일반적으로 가장 많이 사용되는 데이터베이스는 PostgreSQL, MySQL, MongoDB 등이 있습니다. 각 데이터베이스에 대한 라이브러리와 함께 작업할 것입니다.

2. 데이터베이스 라이브러리 설치

선택한 데이터베이스에 대한 라이브러리를 설치해야 합니다. npm을 사용하여 필요한 라이브러리를 설치할 수 있습니다. 예를 들어, PostgreSQL을 사용할 것이라면 다음 명령을 사용하여 pg 패키지를 설치합니다.

npm install pg

3. 데이터베이스 연결 설정

Next.js에서 데이터베이스와의 연결을 설정해야 합니다. 이 작업은 주로 프로젝트의 pages/api/ 디렉토리에 있는 API 엔드포인트를 통해 이루어집니다. 데이터베이스 연결 설정을 위해 필요한 정보는 데이터베이스 종류에 따라 다르지만, 일반적으로 호스트, 포트, 사용자 이름, 암호 등의 정보를 포함합니다.

import { Pool } from 'pg';

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'mydatabase',
  password: 'mypassword',
  port: 5432,
});

export default pool;

위의 예시에서는 PostgreSQL을 사용하고 있으며, pg 패키지의 Pool 클래스를 사용하여 데이터베이스 연결을 설정하고 내보내고 있습니다. 앞서 설치한 데이터베이스 라이브러리에 따라 설정 방법이 달라질 수 있으니 해당 라이브러리의 문서를 참조하세요.

4. API 엔드포인트 작성

데이터베이스와의 연결이 설정되었으므로, 실제로 데이터베이스와의 상호작용을 구현할 수 있는 API 엔드포인트를 작성해야 합니다. Next.js는 pages/api/ 디렉토리 내에 있는 파일들을 API로 자동으로 인식하므로, 해당 디렉토리 아래에 존재하는 파일들이 API 엔드포인트가 됩니다.

// pages/api/users.js
import pool from '../../db';

export default async function handler(req, res) {
  try {
    const result = await pool.query('SELECT * FROM users');
    res.status(200).json(result.rows);
  } catch (error) {
    res.status(500).json({ error: 'Database error' });
  }
}

위의 예시에서는 users 테이블에서 모든 데이터를 가져와 클라이언트에게 응답하는 API 엔드포인트를 작성하였습니다.

5. 데이터베이스 연동 테스트

작성한 API 엔드포인트를 테스트하여 데이터베이스와의 연동이 정상적으로 이루어지는지 확인해야 합니다. Next.js 개발 서버를 실행하고, 브라우저에서 해당 엔드포인트에 접속하여 응답 결과를 확인할 수 있습니다.

npm run dev

위 명령을 실행한 후, 브라우저에서 http://localhost:3000/api/users에 접속하여 데이터베이스의 사용자 목록이 정상적으로 출력되는지 확인하세요.

마무리

위에서 소개한 방법을 활용하여 Next.js 프로젝트에서 데이터베이스와의 연동을 구현할 수 있습니다. 데이터베이스 종류와 설정에 따라 구체적인 방법이 달라질 수 있으니, 해당 데이터베이스 라이브러리의 공식 문서를 참조하여 필요한 설정을 적절하게 진행하세요.

#Nextjs #DatabaseInteractions