Next.js에서 fs모듈 사용하기 :: ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in

헤이 친구들 Next.js로 홈페이지는 잘 만들고 있어?

파일 만들고 직접 접근하려는데 오류나지 않아?

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 

 

한번 내가 질문을 던져볼께!

Hoxy...

/page 하단에 있는 페이지 컴포넌트 코드에다가 넣은건 아니지?

 

뜨끔한 친구들!

일단 Next.js로 만든 페이지는 미리 생성해 두었다가 내려주는 건 이해하고 있을꺼야!

여기서 이미 아! 한 친구들 있을껄? ㅎ

 

fs 모듈을 왜 쓰고 싶어하는지 다시한번 생각해봐.

요건 프로그램이 실행되는 서버의 파일시스템을 접근하고자 하는거지.

페이지 컴포넌트에 작성한 코드는, 맨처음에 호출할때는 Next.js서버에서 실행되고, 이후 라우터로 페이지 이동한경우는 클라이언트(즉, 사용자 브라우저)에서'도' 실행될수 있어, 그런데, 서버에 있는 파일을 접근하려고 하면 당연히 오류가 나겠지?

그래서 아예 연동안되게 막아놓은거야!

그럼 어떻게 하면 될까?

서버에서만 실행되는 코드에 넣으면 돼!

오디? 바로 api 디렉토리 하위에다가 코드를 넣으면 되지.

페이지 컴포넌트는 이 api를 통해 가져온 내용을 처리하도록 수정 OK?

Photo by Mr Cup / Fabien Barral on Unsplash

그런데 서버에서 파일처리 괜찮을까?

이미 서버에서 뭘해야지 떠올리고 있다면, Next.js가 추구하는 JAMStack을 아직 모르는 거야. 

일단 파일시스템을 사용하기로 생각했다면, JAMStack을 안하기로 했다고 생각할께. 단일 서버에 하나만 돌린다면 상관없을것 같고, JAMStack배포는 포기하는게 좋아. 왜냐면 JAMStack을 따라 배포한다면 서버가 어느위치에 있을지는 배포시스템만 알거든. 그래서 개인용으로 하나만 띄우는 서버는 괜찮지만, JAMStack으로 배포했다면 저장한 파일을 다시 읽어올지는 알수 없다는 점. 명심!

아래 내용을 한번 읽어보길 추천할께

https://ppsu.tistory.com/72

Jamstack이란 무엇일까? (프론트엔드 개발자들이여 프론트에 집중하자!)