Module not found: Can't resolve 'fs'

Module not found: Can't resolve 'fs' '만' 떴다면

만약 다른 오류가 없이 이 오류만 떴다면 임시방편책으로 해결이 가능하다.

next.config.js 혹은 next.config.mjs에

    //const nextConfig = {}가 있다면 그 안에 넣어주면 됩니다
    webpack: (config) => {   
          config.resolve.fallback = {
            fs: false,
            path: false,
          };
       
        return config;
      },

이렇게 해주면 Webpack이 클라이언트 번들에서 Node.js의 fs, path 모듈을 무시하므로 오류가 뜨지 않는다.

코드 구조에 따라 다르겠지만 이걸로 문제가 해결되는 케이스도 있을 것이다.

나는 그렇지 못했다...

App router와 Page router

Next.js는 13버전 정도부터 App routing을 지원하기 시작했고, 내가 쓰는 14.2.6버전에 와서는 App router의 사용을 권장하고 있다.
기본적으로 app 디렉토리 하위의 페이지들은 서버 컴포넌트로 취급되며, 여기서 Node.js의 fs 모듈, path 모듈 등을 호출해서 사용해도 아무 문제가 되지 않는다.

다만... pages 디렉토리라면 이야기가 달라진다.

pages 디렉토리는 App router가 사용되기 전 Next.js의 기본적인 라우팅 방법인 Page router의 기본 디렉토리였다.
pages 디렉토리 하위의 페이지들은 클라이언트 컴포넌트로 취급되고, 서버 쪽에서 데이터를 가져오거나 하려면 getStaticProps(), getStaticPaths() 등의 전용 함수를 호출해야 한다.

나는 그런 것도 모르고 컴포넌트와 페이지를 구분하고 싶은 마음에 components와 pages를 나눠서 프로젝트 폴더 구조를 설계했다.
그래서 pages 안의 PostListPage.tsx에서 fs, path 모듈을 사용하는 함수를 호출하자 오류가 발생한 것이었다.

Module build failed: UnhandledSchemeError: Reading from "node:events" is not handled by plugins. Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "node:" URIs.

이런 오류 문구에 매몰되서 Webpack 문제인가? 계속 찾아볼 필요는 없다.

이걸 보고 아 posts.ts가 문제구나! 라고 단정해서도 안된다. posts.ts 안의 함수를 호출한 위치가 문제일 수도 있다.

이런 저런 시도 끝에 posts 디렉토리 하위만 아니면 된다는걸 알았다. app 디렉토리나 components 디렉토리 하위로 PagePostList.tsx를 이동시키면
해당 컴포넌트들은 서버 컴포넌트 취급을 받기 때문에 빌드 시에 서버 쪽에서 Node.js 관련 모듈들을 사용할 수 있게 된다.

아마도 이후에 Next.js 14를 사용하는 사람은 대부분 App routing으로 넘어갈테니 이런 일을 겪는 사람은 잘 없을 거라 생각하지만
나처럼 App routing을 사용하면서 pages 디렉토리를 만드는 것만 유의하면 될 듯 하다.