Automatically Refresh Next.js ISR Pages using GitHub Webhooks

[NonamedBread]

개요

Next.js의 Incremental Static Regeneration (ISR) 기능을 활용하여 정적 페이지를 동적으로 업데이트하는 기능을 구현
GitHub Webhook을 사용하여 저장소의 변경사항이 있을 때마다 자동으로 페이지를 재생성

목적

• Next.js ISR 페이지의 콘텐츠를 최신 상태로 유지
• 콘텐츠 업데이트 시 자동으로 페이지 갱신
• 개발자의 수동 개입 없이 프로세스 자동화

구현 계획

API 라우트 생성

• pages/api/github-webhook.js 파일 생성
• GitHub Webhook의 POST 요청 처리
• res.revalidate('/path/to/your/page') 사용하여 페이지 재생성

GitHub Webhook 설정

• 저장소의 Settings > Webhooks 메뉴에서 Webhook 추가
• Payload URL: https://your-site.com/api/github-webhook
• Content type: application/json
• 트리거할 이벤트 선택 (예: Push events)

보안 설정 (선택사항)

• Webhook에 비밀키 설정
• API 라우트에서 x-hub-signature-256 헤더로 요청 진위성 검증

기술 요구사항

• Next.js 12.2.0 이상 (res.revalidate() 함수 사용)
• GitHub 저장소에 대한 관리자 권한 (Webhook 설정용)

주의사항

• ISR 재생성 빈도와 서버 부하 간의 균형 조정 필요
• Webhook 보안 설정 강력 권장

참고 자료

• Next.js ISR 문서
• GitHub Webhooks 가이드