Next.js에서 mysql2 연결하기 (net error 해결기)

net error는 왜 발생하는 것인가?!

서버사이드 렌더링을 해야하는데 클라이언트단에서 렌더링을 시도할 때 발생!!

-> 서버사이드 렌더링으로 코드를 수정해야 한다!!

api통신으로 해결하는 방법으로 수정

 

 

1.db 연결하기

// src/lib/db.ts
import mysql from 'mysql2/promise';

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

export default database;

 

 

2. api page만들기

import {NextResponse} from 'next/server';
import database from '@/app/lib/db';


export async function GET() {
  try {
      const db = await database.getConnection()
      const query = 'select * from dw_animals'
      const rows = await db.execute(query)
      db.release()
      
      return NextResponse.json(rows)
  } catch (error) {
      return NextResponse.json({
          error: error
      }, { status: 500 })
  }
}

 

 

3. 클라이언트단에서 확인하기

import { useEffect, useState } from 'react';
import Loading from '../Loading';

const Issue:React.FC =()=>{
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setData(data);
      });
  }, []);

  if (!data) {
    return <Loading />;
  }

  return(
{/* 생략 */}
)
}
  
export default Issue;

 

콘솔로 출력된 데이터

값이 정상적으로 출력되는것을 알 수 있다!!