next 에서 fs 사용하기

참조

1.

$\rm\color{#DD6565}{Module\; not\; found: Can't\; resolve\; fs}$

일반적으로 클라이언트 측에서 nodejs 라이브러리를 사용하려고 할 때 발생하는 오류, 클라이언트(브라우저)에서는 사용이 불가능한 패키지 이므로 오류가 발생하게 된 것
next.config.mjs 파일을 다음과 같이 편집한다.

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  },
};
export default nextConfig;

2.

$\rm\color{#DD6565}{TypeError:\;fs\_\_WEBPACK\_IMPORTED\_MODULE\_1\_\_\_default(...).readdir \;is\; not\; a\; function}$

이 에러를 해결하기 위해서
/src/app/api/inCon/route.tsx였던 경로를
/src/app/api/route.tsx 로 바꾼다.
fs가 서버 단에서만 쓸 수 있어야 해서 api폴더 바로 밑으로 바꿔주었다.
(inCon파일 밑에 있어도 서버 단에서만 쓰도록 'use client'선언도 하지 않았는데 왜 에러가 난건지는 모르겠다. api파일 바로 밑에 있어야 되는 규칙 같은 건가?)

3.

아니나 다를까 바로 에러가 났다.

2.에서 경로를 바꿨더니 에러가 나지 않아서 fs라이브러리를 사용하는 커스텀 훅을 만들어서 사용하려고 했는데 프론트 단의 파일에서 훅을 import 해서 사용을 하니 다시 같은 에러가 나왔다.

4.

커스텀 훅의 형태로 사용하는 것이 아니라
api로 만들어서 fetch 해왔더니 에러가 사라졌다.