[Next.js@13] Next에서 mysql 연동하기

[Next.js@13] Next에서 mysql 연동하기

 

 

기본적으로 필요한 세팅인 mysql, schema, table은 설치 및 생성되어있다는 가정하에 작성한다.

 

필요한 라이브러리를 설치한다.

serverless-mysql은 서버리스 규모로 mysql 연결을 관리하기 위한 모듈이다.

이 라이브러리는 mysql을 랩핑하고있기때문에 반드시 mysql을 설치해주어야한다.

npm i mysql
npm i serverless-mysql

//typescript 이용 시
npm i @types/mysql

1. mysql 연결 파일을 생성한다.

루트경로에 db 디렉토리를 만들고 db.ts 파일을 생성했다.

내부에는 'serverless-mysql'에서 mysql을 import 시킨다.

기본적인 설정은 mysql과 동일하다.

mysql을 호출하여 config객체 키에 값들을 할당해준다.

보안을 위해 환경변수에서 가져왔다.

//db.ts
import mysql from 'serverless-mysql';

const db = mysql({
  config: {
    host: process.env.MYSQL_HOST,
    port: process.env.MYSQL_PORT as unknown as number,
    database: process.env.MYSQL_DATABASE,
    user: process.env.MYSQL_USER,
    password: process.env.MYSQL_PASSWORD,
    charset: 'utf8mb4',
  },
});

2. 비동기 쿼리실행 함수를 생성한다.

첫번째 인자로 쿼리문을 받고, 두번째 인자로 밸류를 받는다.

받은 인자들로 query를 실행하고 난 뒤에는 end()를 실행하여 정리해준다.

//db.ts
.
.
.
중략

export default async function excuteQuery({
  query,
  values,
}: {
  query: string;
  values: any;
}) {
  try {
    const results = await db.query(query, values);
    await db.end();
    return results;
  } catch (error) {
    return { error };
  }
}

3. 필요한곳에서 호출해준다.

준비는 끝났다. 위에서 만들었던 excuteQuery를 import 시켜주고 적재적소에 호출해주자!

excuteQuery는 실행한 쿼리의 결과값을 리턴해준다.

나는 게시판 페이지로 진입했을 때 getServerSideProps를 통해 아래 API Routes를 호출하는 방식으로 사용했다.

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

const handler = async (req: NextApiRequest, res: NextApiResponse<any>) => {
  try {
    await excuteQuery({
      query: 'SELECT * FROM board_table',
      values: '',
    }).then((queryResult) => {
      res.status(200).send(queryResult);
    });
  } catch (err) {
    console.log(err);
  }
};

export default handler;

 

- 참고 사이트

https://www.npmjs.com/package/serverless-mysql?activeTab=readme 

serverless-mysql