문제

해외 마케팅 팀에서 SEO 최적화를 위해 Sitemap.xml을 추가해달라는 요청을 받았다.

일단은 구글에서 사이트 URL 입력시에 sitemap.xml을 제작해주는 사이트가 있어서 돌렸지만 생각해보니까 Storyblok 서비스(Headless CMS)를 통해서 페이지는 얼마든지 추가가 가능하기에 그때 그때 sitemap.xml을 수동으로 generate할 수 없으니 자동화를 해야겠다고 생각했다.

문제 해결 과정

1. 우선 구글에서 Sitemap.xml을 dynamic generate 한 사례가 있나 검색해보았다.
2. 이미 사례는 많았고 코드를 참고하여 Storyblok과 어떻게 연동시킬지만 생각했다.
3. Storyblok에 page들을 받아오는 API가 있었고 이를 활용하여 page들을 받아오고 sitemap.xml에 들어갈 string content를 만드는 로직를 제작했다.
4. Next.js에서 /sitemap.xml로 요청이 오면 3번에서 작성한 로직을 response body에 담고 header의 Content-Type을 xml로 임의로 변경하여 응답하는 API를 작성하여 매 요청마다 최신 상태를 반영한 sitemap.xml을 반환하는 API를 구축하였다.