헤이 친구들 Next.js로 홈페이지는 잘 만들고 있어?
파일 만들고 직접 접근하려는데 오류나지 않아?
ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in
한번 내가 질문을 던져볼께!
Hoxy...
/page 하단에 있는 페이지 컴포넌트 코드에다가 넣은건 아니지?
뜨끔한 친구들!
일단 Next.js로 만든 페이지는 미리 생성해 두었다가 내려주는 건 이해하고 있을꺼야!
여기서 이미 아! 한 친구들 있을껄? ㅎ
fs 모듈을 왜 쓰고 싶어하는지 다시한번 생각해봐.
요건 프로그램이 실행되는 서버의 파일시스템을 접근하고자 하는거지.
페이지 컴포넌트에 작성한 코드는, 맨처음에 호출할때는 Next.js서버에서 실행되고, 이후 라우터로 페이지 이동한경우는 클라이언트(즉, 사용자 브라우저)에서'도' 실행될수 있어, 그런데, 서버에 있는 파일을 접근하려고 하면 당연히 오류가 나겠지?
그래서 아예 연동안되게 막아놓은거야!
그럼 어떻게 하면 될까?
서버에서만 실행되는 코드에 넣으면 돼!
오디? 바로 api 디렉토리 하위에다가 코드를 넣으면 되지.
페이지 컴포넌트는 이 api를 통해 가져온 내용을 처리하도록 수정 OK?
그런데 서버에서 파일처리 괜찮을까?
이미 서버에서 뭘해야지 떠올리고 있다면, Next.js가 추구하는 JAMStack을 아직 모르는 거야.
일단 파일시스템을 사용하기로 생각했다면, JAMStack을 안하기로 했다고 생각할께. 단일 서버에 하나만 돌린다면 상관없을것 같고, JAMStack배포는 포기하는게 좋아. 왜냐면 JAMStack을 따라 배포한다면 서버가 어느위치에 있을지는 배포시스템만 알거든. 그래서 개인용으로 하나만 띄우는 서버는 괜찮지만, JAMStack으로 배포했다면 저장한 파일을 다시 읽어올지는 알수 없다는 점. 명심!
아래 내용을 한번 읽어보길 추천할께
Jamstack이란 무엇일까? (프론트엔드 개발자들이여 프론트에 집중하자!)
Next.js Jamstack 배포를 지원한다는데 무슨말일까? 찾아보니 홈페이지도 있네? https://jamstack.org/ Jamstack | JavaScript, APIs, and Markup What is the Jamstack? You may have already seen or worked on..
ppsu.tistory.com
📅 최종 업데이트: 2026년 3월 | 원문 작성: 2020년 7월
이 글은 Next.js Pages Router 기준으로 작성되었습니다. 아래에 2026년 App Router 기준 업데이트를 추가했습니다.
2026 업데이트: App Router에서 fs 모듈 사용하기
2020년에 이 글을 작성한 이후 Next.js에 큰 변화가 있었습니다. Next.js 13부터 App Router가 도입되면서, fs 모듈을 사용하는 방법도 완전히 달라졌습니다.
🔑 핵심 변경사항: Server Components
App Router에서는 모든 컴포넌트가 기본적으로 Server Component입니다. 즉, 별도의 API Route를 만들지 않고도 컴포넌트에서 직접 fs 모듈을 사용할 수 있게 되었습니다!
✅ App Router에서의 올바른 사용법
// app/posts/page.tsx (Server Component - 기본값)
import fs from 'fs';
import path from 'path';
export default function PostsPage() {
const filePath = path.join(process.cwd(), 'data', 'posts.json');
const fileContents = fs.readFileSync(filePath, 'utf8');
const posts = JSON.parse(fileContents);
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</article>
))}
</div>
);
}❌ 주의: Client Component에서는 여전히 사용 불가
// 이렇게 하면 에러 발생!
'use client';
import fs from 'fs'; // Client Component에서는 여전히 fs 사용 불가!📋 Pages Router vs App Router 비교
| 구분 | Pages Router (2020 원문) | App Router (2026 업데이트) |
|---|---|---|
| fs 사용 위치 | API Routes (/pages/api/) | Server Components (기본값) |
| 데이터 가져오기 | getServerSideProps / getStaticProps | Server Component에서 직접 fetch/fs |
| API 엔드포인트 | /pages/api/*.ts | /app/api/*/route.ts (Route Handlers) |
| 빌드 방식 | SSR / SSG 선택 | 기본 정적 렌더링 + 필요시 dynamic |
💡 2026년 추천 방법
- 신규 프로젝트: App Router 사용 → Server Component에서 fs 직접 사용
- 기존 Pages Router 프로젝트: 원문의 API Routes 방식 그대로 유효
- 마이그레이션: Next.js 공식 마이그레이션 가이드 참고 (pages → app 점진적 전환 가능)
원문에서 설명한 "서버에서만 실행되는 코드에 넣어야 한다"는 핵심 원칙은 변함없습니다. App Router가 이 원칙을 더 쉽게 지킬 수 있게 해준 셈이죠!
PPSU의 다른 유용한 글
관련 글
'AI와 개발' 카테고리의 다른 글
| Jamstack이란 무엇일까? (프론트엔드 개발자들이여 프론트에 집중하자!) (0) | 2020.06.30 |
|---|---|
| Next.js 배포하기(Vercel 사이트 이용하기) (0) | 2020.06.12 |
| Next.js 9 - CSS ModuleTypescript 적용하기 (0) | 2020.06.06 |
| Next.js - Typescript 적용하기 (0) | 2020.06.06 |
| Next.js - API 만들기 (API Routes) (1) | 2020.05.31 |
