Next.js의 덜 알려진 실전 기능 10가지를 코드 예시와 함께 다룬다. Redirect/Rewrite, Preview Mode, 빌드 훅, Preact 교체, 절대 경로 임포트, CRUD API Routes, HTTP 캐싱 헤더, 공유 컴포넌트 속성, CapacitorJS 모바일 변환까지 망라한다.
핵심 포인트- Redirect vs Rewrite: Redirect는 301/302 응답을 보내지만, Rewrite는 프록시처럼 작동해 새 경로를 숨기며 URL을 source 그대로 유지한다
- Preact 교체: 고급 React 기능을 쓰지 않는다면 webpack alias로 프로덕션 빌드에서만 preact/compat으로 교체해 번들 크기를 줄일 수 있다
- 절대 경로 임포트: tsconfig.json의 baseUrl + paths로 깊은 상대 경로를 @/components 형식으로 단순화
- CRUD API Routes: pages/api 핸들러에서 req.method로 분기해 GET/POST/PUT/DELETE를 단일 파일로 처리
- HTTP 캐싱 헤더: res.setHeader('Cache-Control', 's-maxage=86400')로 API Route 응답을 CDN에 캐시
상세 정리- Tip 1 Redirect: next.config.js의 redirects() async 함수에서 source/destination/permanent를 반환한다. 9.5+부터 정규식·와일드카드 경로를 지원하며 permanent: true면 308을 보낸다.
- Tip 2 Rewrite: rewrites() 함수는 301/302를 발생시키지 않고 프록시처럼 작동해 새 경로를 클라이언트에게 숨긴다. URL은 source 그대로 유지되고 실제 처리는 destination에서 일어난다.
- Tip 3 Preview Mode: 정적으로 생성된 콘텐츠의 초안을 빌드 없이 미리 볼 수 있다. 요청 시간에 초안 페이지를 생성해 CMS 편집자의 워크플로우를 개선한다.
- Tip 4 빌드 훅: next.config.js에서 webpack 설정을 재정의하거나 빌드 시 사이트맵·RSS 피드·검색 인덱스를 자동 생성할 수 있다.
- Tip 5 Preact 교체: webpack resolve.alias로 react와 react-dom을 preact/compat으로 교체. dev 환경은 그대로 두고 프로덕션 빌드에서만 적용해 번들 크기를 줄인다.
- Tip 6 절대 경로: tsconfig.json의 baseUrl과 paths 설정으로 깊은 상대 경로인 ../../../components/button을 @/components/button으로 단순화한다.
- Tip 7 CRUD API Routes: pages/api 폴더의 핸들러에서 req.method로 분기해 GET(200), POST(200), PUT(201), DELETE(204)를 단일 파일에서 처리한다.
- Tip 8 캐싱 헤더: res.setHeader('Cache-Control', 's-maxage=86400')로 API Route 응답을 CDN에 하루치 캐시한다. SSR 페이지에도 동일하게 적용 가능하다.
- Tip 9 공유 컴포넌트 속성: 페이지 컴포넌트에 정적 속성(title, description)을 붙이고 _app.js에서 Component.title로 읽어 페이지별 메타데이터를 일관되게 관리한다.
- Tip 10 모바일 앱: CapacitorJS를 활용하면 Next.js 앱을 iOS/Android 네이티브와 유사한 모바일 앱으로 변환할 수 있다.
왜 읽나Next.js 기본 설정 너머의 실전 기능(Rewrite, 캐싱 헤더, Preact 교체, 절대 경로)을 코드 예시와 함께 빠르게 습득하고 싶은 Next.js 개발자에게 유용하다.
Vercel Blog·
LINE Engineering·