[NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기

📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기

---

검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다.

 

이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다.

 

이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다.

 

📌 sitemap.xml Route Handler 폴더 구조 잡기

app
 ㄴ sitemap.xml
    ㄴ route.ts

위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로 진입했을 때 사이트맵 데이터를 뿌려줄 수 있도록 합니다.

 

📌 Api Route 작성

import { NextResponse } from 'next/server';

const formatDate = (date: Date): string => {
  return date.toISOString().split("T")[0];
};

// 동적 URL 데이터를 가져오는 함수 (예: 데이터베이스나 API에서 가져오기)
async function getDynamicUrls() {
  // 예시 데이터
  return [
    { loc: 'https://example.com/page1' },
    { loc: 'https://example.com/page2' },
  ];
}

export async function GET() {
  const urls = await getDynamicUrls();

  // XML 생성
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${urls
        .map(
          ({ loc }) => `
        <url>
          <loc>${loc}</loc>
          <lastmod>${formatDate(new Date())}</lastmod>
        </url>
      `
        )
        .join('')}
    </urlset>
  `;

  return new NextResponse(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

API Route를 이용해 요청을 받으면 DB에서 데이터를 받아와 즉시 동적으로 사이트맵을 생성하여 응답해줍니다.

전략적으로 중요하게 노출이 필요한 페이지의 사이트맵을 동적으로 생성해주시면 됩니다.

 

📌 예시

이번 프로젝트에서 저는 프랜차이즈 브랜드 페이지마다 사이트맵을 생성해주었다고 했는데요.

그 결과는 다음과 같습니다.

import { BrandService } from "@/services/brand";
import { NextResponse } from "next/server";

type Route = {
  url: string;
  priority: string;
};

const formatDate = (date: Date): string => {
  return date.toISOString().split("T")[0];
};

const fetchRoutes = async (): Promise<Route[]> => {
  const baseUrl = process.env.NEXT_PUBLIC_DOMAIN;

  const staticRoutes: Route[] = [
    { url: `${baseUrl}/`, priority: "1" },
    { url: `${baseUrl}/search`, priority: "0.9" },
  ];

  const brandRoute: Route[] = [];
  let pageNo = 1;
  while (1) {
    const dataList = (await BrandService.getBrandList({ pageNo, pageSize: 1000 }, true))?.payload;
    if (!dataList?.length) break;
    dataList.forEach((item) =>
      brandRoute.push({
        url: `${baseUrl}/brand/${item.brandNm}`,
        priority: "0.8",
      })
    );
    pageNo++;
  }

  return [...staticRoutes, ...brandRoute];
};

const generateSitemap = (routes: Route[]) => {
  const escapeXml = (str: string) => {
    return str
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&apos;");
  };

  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
      ${routes
        .map(
          ({ url, priority }) => `
        <url>
          <loc>${escapeXml(url)}</loc>
          <lastmod>${formatDate(new Date())}</lastmod>
          <priority>${priority}</priority>
          <changefreq>weekly</changefreq>
        </url>
      `
        )
        .join("")}
    </urlset>`;
};

export async function GET() {
  const routes = await fetchRoutes();
  const sitemap = generateSitemap(routes);

  return new NextResponse(sitemap, {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}

한번에 모든 값을 가져오면 서버가 아파할 것 같아 나눠서 가져왔고,

xml에 특정 특수문자가 껴있으면 오류가 발생해 escape해주는 함수로 변환해주었습니다.

 

그 결과 성공적으로 사이트맵을 생성할 수 있었고, 10000개 이상의 페이지들이 구글 서치콘솔에 인식되었습니다.