Next.js, Mantine으로 인프콘 티저 페이지 개발
by DD
3년 전
조회수 6
Next.js를 활용하여 SEO에 유리한 정적 페이지를 구축함
Mantine 디자인 시스템 도입으로 개발 기간을 단축함
Cloudflare Pages를 통해 무제한 대역폭으로 배포 환경을 구축
Next.js 정적 페이지 배포 전략
Next.js를 사용하여 정적 페이지를 생성함으로써 서버 관리 부담을 줄였다. 구체적으로 Static HTML Export 기능을 활용하여 Cloudflare Pages에 배포했다. 따라서 프론트엔드 개발팀만으로도 유지보수가 가능하도록 시스템을 구축했다.
Mantine 디자인 시스템 도입 효과
Mantine 디자인 시스템 도입으로 개발 시간을 획기적으로 단축했다. 전역 테마 설정을 통해 일관된 스타일을 적용하고, 컴포넌트 커스텀 기능을 활용하여 디자인 유연성을 확보했다. 반면, 초기 렌더링 시 스타일 미적용 이슈와 useMediaQuery 훅의 문제 등, 몇 가지 트러블 슈팅을 겪었다.
배포 환경 선택: Cloudflare Pages
Cloudflare Pages를 선택한 주된 이유는 무제한 대역폭 제공이라는 점이다. Netlify와 비교하여 비용 효율성이 높고, 무제한 사이트 발행 및 요청을 지원한다. 따라서 인프콘 티저 페이지와 같이 트래픽 변동이 큰 서비스에 적합한 선택이었다.
