Next.js와 MySQL 연동하기

이번 포스팅에서는 MySQL 과 Next.js를 연동하는 방법에 대해 정리해보려 한다.

(접속이 가능한 MySQL Database 접속정보가 있거나 설치가 되어 있다는 전제하에 진행)

 

※ 주의할 점

npm 으로 설치한 mysql 모듈은 서버 사이드 로직에서 실행되기 때문에 클라이언트 사이드 로직에서는 직접 붙을수가 없다. 클라이언트 사이드 로직에서 DB와 연동하여 데이터를 가져와야 한다면 Next.js 의 API Routes 기능을 사용하여 fetch 나 axios로 데이터를 가져오거나 서버에서 실행되는 getServerSideProps나 getStaticProps 를 사용하여 mysql 모듈로 데이터를 가져오고 해당 컴포넌트에 데이터를 props로 내려주는 방법을 상황에 맞게 사용하는 것을 추천한다.

 

1. MySQL 설치

프로젝트경로에서 아래 명령어를 사용하여 MySQL 모듈을 설치한다.

npm install mysql

[MySQL 설치]

2. MySQL 연동

설치한 MySQL 모듈을 사용하기 위해 핸들러 함수 상단에 아래와 같이 선언한다.

const mysql = require('mysql');

 

접속정보를 mysql 의 createConnection 함수의 파라미터로 넣어주고 connect함수로 접속한다.

접속 성공이후 쿼리를 실행하도록 async/await을 사용하였다. 

const conn = {
  // mysql 접속 설정
  host: process.env.CLOUD_MYSQL_HOST,
  port: process.env.CLOUD_MYSQL_PORT,
  user: process.env.CLOUD_MYSQL_USER,
  password: process.env.CLOUD_MYSQL_PASSWORD,
  database: process.env.CLOUD_MYSQL_DATABASE_NM,
};

export const handleMySql = async () => {
  const mysql = require('mysql');
  const connection = mysql.createConnection(conn);

  await connection.connect();
   .
   .
   .
   .
};

 

이후에는 coonnection.query 함수에 실행하고자 하는 쿼리를 매개변수로 넣어주고 실행하면 된다.

로직은 아래와 같다.

const conn = {
  // mysql 접속 설정
  host: process.env.CLOUD_MYSQL_HOST,
  port: process.env.CLOUD_MYSQL_PORT,
  user: process.env.CLOUD_MYSQL_USER,
  password: process.env.CLOUD_MYSQL_PASSWORD,
  database: process.env.CLOUD_MYSQL_DATABASE_NM,
};

export const handleMySql = async () => {
  const mysql = require('mysql');
  const connection = mysql.createConnection(conn);

  await connection.connect();

  let sql = 'SELECT * FROM POST';
  let result;
 
 // 쿼리 실행 및 결과 반환
  connection.query(sql, (error: any, data: any, fields: any) => {
    if (error) {
        console.error(error);
    } else {
        result = data;
    }
    });

  connection.end();
  return result;
};

connection.query 함수의 첫번째 매개변수는 실행하고자 하는 쿼리이고 두번째는 콜백 함수를 넣어주면 된다.

 

콜백함수로 넘어오는 파라미터 는 아래와 같다.

 

- error : 쿼리실행시 문법오류가 있다면 오류내용

- data : 쿼리를 실행하여 가져온 쿼리 결과 데이터

- fields : 반환된 결과 데이터 필드에 대한 정보 

 

Insert 인 경우 해당 테이블의 primary 키가 auto increment 일때 data.insertId로 키값을 반환을 해준다.