Next.js 15에서 동적 Sitemap 생성과 fetch 호출 문제 해결 방법(app router)

목차

1. Sitemap이란?

2. sitemap.xml 파일 생성하는 방법

3. fetch 동적으로 호출하기

---

 

 

1. 웹사이트의 SEO 최적화와 사이트 구조 이해를 돕기 위해 sitemap.xml 파일을 생성하는 것은 매우 중요한 작업입니다.
2. Next.js 15에서는 sitemap.xml 파일을 동적으로 생성하는 방법을 제공하며, 이를 통해 사이트의 최신 상태를 검색 엔진에 자동으로 전달할 수 있습니다.
3. 이 글에서는 동적 sitemap.xml 파일 생성과 관련된 문제 해결 방법을 설명합니다.

---

1. Sitemap이란?

Sitemap.xml은 웹사이트의 각 페이지 URL을 포함하는 XML 파일로, 검색 엔진이 웹사이트의 구조를 더 잘 이해하고 효율적으로 색인화할 수 있도록 돕습니다. 이 파일은 주로 검색 엔진 크롤러가 페이지를 빠르게 찾아내어 색인화하는 데 사용됩니다.

2. sitemap.xml 파일 생성하는 방법

2-1. 공식 문서에 있는 정적 sitemap 생성 예제입니다.

• app 디렉토리에 sitemap.js 파일을 추가하여 sitemap.xml 파일을 설정합니다.

export default function sitemap() {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ];
}

 

2-2. 동적 sitemap 생성하기.

• 동적으로 페이지를 생성하려면 데이터베이스나 외부 API에서 URL 정보를 가져와야 합니다.
• 예를 들어, 블로그 게시물 목록을 가져와서 동적으로 sitemap.xml을 생성할 수 있습니다.
• 아래의 코드는 외부 API에서 게시물 정보를 가져와 동적으로 sitemap.xml을 생성합니다.

import { getTimeZone } from "@/utils/DateUtil";

async function getSiteMaps() {
  const res = await fetch(`http://test.com/api/posts/site-map`);
  
   if (!res.ok) {
    throw new Error("Failed to fetch site map data");
  }
  
  const data = await res.json();
  return data.data;
}

export default async function sitemap() {
  const result = await getSiteMaps();
  const siteMaps = result?.siteMaps || [];

  const posts = siteMaps.map((siteMap) => ({
    url: `http://test.com/blog/${siteMap.postId}`,
    lastModified: getTimeZone(),
    changeFrequency: "weekly",
    priority: 1,
  }));

  return [
    {
      url: `http://test.com/blog`,
      lastModified: getTimeZone(),
      changeFrequency: "weekly",
      priority: 1,
    },
    ...posts,
  ];
}

3. fetch 동적으로 호출하기

3-1. 문제

API를 통해 동적으로 sitemap을 생성할 때 발생할 수 있는 문제는 캐싱 문제입니다. 만약 캐시가 설정되지 않으면, 빌드 시 최신 데이터를 반영하지 않거나, 데이터가 오래된 상태로 생성될 수 있습니다.

또한, Docker 환경에서 API 호출 시 SSL 인증서 문제도 발생할 수 있습니다.

 

3-2. 해결 방법

• 캐시 비활성화: fetch 함수의 옵션에 cache: "no-store"를 추가하면, 항상 최신 데이터를 가져오도록 설정할 수 있습니다. 이를 통해 캐시 문제를 해결할 수 있습니다.
• SSL 인증서 문제 해결: Docker 환경에서 HTTPS 인증서 문제를 방지하기 위해 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0" 설정을 추가해야 할 수도 있습니다. 이 설정을 통해 SSL 인증서 문제를 해결할 수 있습니다.

async function getSiteMaps() {
  // Docker  해결
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";  

  const res = await fetch(`http://test.com/posts/site-map`, {
    cache: "no-store", // 항상 최신 데이터를 가져 옮
  });
  
   if (!res.ok) {
    throw new Error("Failed to fetch site map data");
  }

  const data = await res.json();
  return data.data;
}

 

이 코드는 동적으로 사이트의 데이터를 fetch하여, 최신 정보로 sitemap.xml을 생성합니다. 또한, Docker 환경에서 발생할 수 있는 SSL 인증서 문제를 해결하며, 캐시를 비활성화하여 항상 최신 데이터를 사용하도록 설정합니다.

 

---

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.