Next.js14에 Mysql연결하기

프레임워크 : next.js14 + TS

db 설정 참고 repo
https://github.com/zinkkii/NextBoard/blob/master/app/lib/db.jsx

환경변수 설정
https://nextjs.org/docs/app/api-reference/next-config-js/env

1. 설치

npm i --save-dev @types/mysql
npm i mysql2

2. 코드

나는 Next.js 14버전을 사용중이라 app/_lib/db.tsx경로로 db파일을 만들었다. 환경변수는 .env.local로 만들어줬다. 그리고 .env.local을 .gitignore에도 추가했다. (공식문서 참조)

//app/_lib/db.tsx
import { createPool } from 'mysql2'

const pool = createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_DATABASE,
    port: 3306,
})

pool.getConnection((err, conn) => {
    if (err) console.log('Error connecting to db...')
    else console.log('Connected to db...!')
    conn.release()
})

const executeQuery = (query, arrParams) => {
    return new Promise((resolve, reject) => {
        try {
            pool.query(query, arrParams, (err, data) => {
                if (err) {
                    console.log('Error in executing the query')
                    reject(err)
                }
                console.log('------db.jsx------')
                //console.log(data)
                resolve(data)
            })
        } catch (err) {
            reject(err)
        }
    })
}

export default executeQuery

그런 다음 홈화면에서 쿼리를 실행시키고 받은 데이터를 뿌려줬다.

//app/page.tsx
import executeQuery from './_lib/db.tsx'

export default async function Home() {
    const sql = 'select * from bridge.user'
    const data = await executeQuery(sql, '')
    const getdata = JSON.parse(JSON.stringify(data))
    console.log(getdata)
    return (
        <div>
            {getdata.map((data, i) => {
                return (
                    <>
                        <p>
                            {data.id} {data.username}
                        </p>
                    </>
                )
            })}
        </div>
    )
}