[Next.js] Next.js + Supabase 동적 사이트맵 생성 방법

배경

필자는 AI 연애재판 사이트 개발 중 사용자가 작성한 사례들의 데이터가 구글에서 검색되지않는 것을 확인했다.

구글 서치 콘솔을 확인하자 역시나 사용자들의 게시물 URL 경로가 색인되지 않고 있었고 이로 인해 SEO 최적화가 되지않아 구글 검색에 노출되지 않는다고 판단하였다.

하지만 사용자가 게시물 데이터를 직접 한땀한땀 사이트맵으로 작성할 수는 없다고 생각했고 각 사례들의 사이트맵을 동적으로 생성하는 과정을 학습하며 위 글을 작성한다.

 

코드

src/app/sitemap.ts

import { MetadataRoute } from "next";
import { supabase } from "@/lib/supabaseClient";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // 기본 URL 목록
  const baseUrls = [
    {
      url: "https://www.love-court.site/",
      lastModified: new Date(),
      priority: 1.0,
    },
    {
      url: "https://www.love-court.site/cases",
      lastModified: new Date(),
      priority: 0.8,
    },
    {
      url: "https://www.love-court.site/case/new",
      lastModified: new Date(),
      priority: 0.8,
    },
    {
      url: "https://www.love-court.site/auth/sign-in",
      lastModified: new Date(),
      priority: 0.8,
    },
    {
      url: "https://www.love-court.site/my-page",
      lastModified: new Date(),
      priority: 0.8,
    },
  ];

  // 데이터베이스에서 모든 케이스 가져오기
  const { data: cases, error } = await supabase
    .from("cases")
    .select("id, created_at")
    .order("created_at", { ascending: false });

  if (error) {
    console.error("사이트맵 생성 중 오류 발생:", error);
    return baseUrls;
  }

  // 케이스 URL 생성
  const caseUrls = cases.map((caseItem) => ({
    url: `https://www.love-court.site/case/${caseItem.id}`,
    lastModified: new Date(caseItem.created_at || new Date()),
    priority: 0.7,
  }));

  // 모든 URL 합치기
  return [...baseUrls, ...caseUrls];
}

 

참고사항

1. 배포된 사이트맵을 확인하려면 www.abcd.site/sitemap.xml  로 이동한다.

2. 배포 시 오류 발생이 의심된다면 빌드 로그를 확인한다 Vercel Project > Depoly > Build Log

오류 발생

사이트맵 정상 배포

3. 위 방법은 배포(빌드) 시에만 동적 생성되기 때문에 주기적인 동적 생성을 원한다면 크론탭이나 웹훅을 이용해야할 것으로 판단된다.

 

참고자료

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js

 

https://www.reddit.com/r/nextjs/comments/190mh8o/can_supabase_queries_be_called_directly_from_eg/

From the nextjs community on Reddit: Can supabase queries be called directly from (e.g.) dynamic sitemap and open graph-image fu