Nextjs에서 sitemap 생성하기

오늘은 NextJS 14의 app router 프로젝트에 sitemap을 생성하는 법에 대해 알아보겠습니다.

NextJS의 공식문서에 따르면 sitemap을 무조건 .xml 형식이 아닌 .js, .ts의 형식으로도 생성할 수 있다고 기재되어있습니다.

sitemap.ts 파일의 경로는 src/app 안에 넣으면 됩니다.

이제 그럼 파일의 내용엔 어떤게 들어가야하는지 알아보면

위와 같은 형식으로 사이트의 정적 경로에 대한 sitemap을 작성하실 수 있습니다.

그럼 동적경로에 대한 sitemap은 어떻게 작성할까요?

동적경로에 대한 sitemap은 변수에 담아 return [] 안에 넣어주어야합니다.

저의 경우엔 블로그 사이트에 각 글의 디테일 페이지가 존재하고 있어 아래와 같이 작성하였습니다.

저는 모든 게시물을 불러오는 API를 호출하여 동적경로에 필요한 값을 받아와

url: `'사이트 주소'/post/${post.id}`, 에 저장하여 map()함수를 이용해

모든 게시물의 디테일 페이지의 sitemap을 저장한 변수를 생성하여 return해주었습니다.

그 결과 google search console에 sitemap을 업로드해보면

잘 읽어와지는 것을 볼 수 있습니다.