NextJS 13 에서 DB 연동한 풀스택 만들때 에러

NextJS를 이용하여 mysql에 연동해서 만들때

npm run dev는 잘 작동 되나

npm run build는 

 

./node_modules/mysql/lib/Connection.js
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/mysql/index.js

./node_modules/mysql/lib/Connection.js
Module not found: Can't resolve 'tls'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/mysql/index.js

./node_modules/mysql/lib/protocol/sequences/Query.js
Module not found: Can't resolve 'fs'

 

위 같이 에러가 나온다면

import mysql, { Connection } from 'mysql';

import mysql from 'serverless-mysql';

 

위와 같은 코드가 들어가는 파일은 pages/api 폴더에 있거나

pages의 상위 디렉토리로 옮겨야함

 

참고로 next.config.js는 수정할 필요 없음

(구글 검색 하면 나오는데 의미 없음)

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { net: false, tls: false, fs: false };
    return config;
  },
};
module.exports = nextConfig

https://web.dev/i18n/ko/code-splitting-with-dynamic-imports-in-nextjs/

Next.js에서 동적 가져오기를 사용한 코드 분할