[Next.js] 동적 라우팅을 사용하는 정적 사이트의 site map

검색 엔진 최적화를 위해 sitemap xml 파일이 필요하여 로직을 구상하였습니다.

 

XML 파일은 수동으로 작성해도 되고 generator 사이트도 있어서 프로젝트 폴더에 넣어주기만 하면 되지만,

동적 라우팅을 사용하는 경우는 수동으로 작성하기에는 한계가 있을 것입니다.

 

현재 저에게 필요한건 메인 페이지와 트렌드 페이지, 동적 경로를 사용하는 post/[id] 단 세 개의 경우입니다.

 

// sitemap.xml.js
import client from "@libs/server/client";

const generateSitemap = (data, origin) => {
  let xml = "";

  data.pages.map((page) => {
    xml += `<url>
      <loc>${origin + page.location}</loc>
      <lastmod>${page.lastMod}</lastmod>
    </url>`;
  });

  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">
      ${xml}
    </urlset>`;
};
const getDate = new Date().toISOString();
export async function getServerSideProps({ res }) {
  const post = await client.post.findMany({
    select: {
      id: true,
    },
  });
  const postPaths = post?.map((path) => {
    return {
      location: `/post/${path.id}`,
      lastMod: getDate,
    };
  });
  const data = {
    pages: [
      {
        location: "/",
        lastMod: getDate,
      },
      {
        location: "/trend",
        lastMod: getDate,
      },
      ...postPaths,
    ],
  };
  res.setHeader("Content-Type", "text/xml");
  res.write(generateSitemap(data, "https://modu.vercel.app"));
  res.end();
  return {
    props: {},
  };
}

const SitemapIndex = () => null;
export default SitemapIndex;

 

메인 페이지와 트렌드 페이지는 수동으로 오브젝트에 추가하고

post 경로는 서버에서 바로 받아옵니다. (API를 만들던 어떤 식으로든 존재하는 post 경로를 받아오면 됩니다.)

 

그리고 문서를 리턴해 주는 것인데, 중요한건 Next.js 프로젝트 폴더 안의 pages에 파일을 작성하는 것입니다.

 

위 코드를 보면 Next Page에서 사용하는 getServerSideProps를 사용한 것을 볼 수 있습니다.

 

sitemap.xml은 크롤러가 접근할 수 있게 페이지와 동일하게 동작해야 합니다.

 

크롤러가 xml로 접근하면 그때 SSR이 호출되고 사이트 맵이 만들어집니다.

 

서버사이드에서 신상 post들을 바로 서버에 요청해서 XML이 만들어지니 동적 라우팅에 대해 대처가 가능합니다.

 

때문에 엄밀히 말하면 저 사이트맵 문서는 이미 작성된 문서가 아닌 접근시 작성되는 것입니다.

 

---

 

브라우저에서 접근한 xml

 

SEOMATOR

 

네이버

 

구글