Next.js MariaDB를 연결 설정

1. 패키지 설치

npm install mariadb

2. DB 연결 파일

//src/lib/db.ts

import mariadb from 'mariadb';

const pool = mariadb.createPool({
  host: 'localhost',
  user: 'xxx',
  password: 'yyy',
  database: 'zzz',
  connectionLimit: 5
});

export async function query(sql: string, values: any[] = []) {
  let conn;
  try {
    conn = await pool.getConnection();
    const result = await conn.query(sql, values);
    return result;
  } catch (error) {
    console.error('앗! 데이터베이스 쿼리 에러:', error);
    throw error;
  } finally {
    if (conn) conn.release();
  }
}

export default pool;

3. API 라우트 설정

//pages/api/example.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { query } from '../../db';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'GET') {
    try {
      const result = await query('SELECT * FROM your_table');
      res.status(200).json(result);
    } catch (error) {
      res.status(500).json({ message: '데이터 가져오기 실패 ㅠㅠ' });
    }
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`${req.method} 메소드는 허용되지 않아요!`);
  }
}

4. 컴포넌트 설정

import { useEffect, useState } from 'react';

export default function ExampleComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/example');
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data.map((item: any) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}