sitemap 제출은 검색 엔진 최적화를 위해 제출하는게 좋다. 그래서 초간단 Next.js 사이트맵 생성하기 가이드를 작성해본다.
준비물
Next.js를 통해 개발 중인 프로젝트
next-sitemap 라이브러리
dynamic route를 사용중이라면 게시물을 불러올 수 있는 api
작업 진행 순서
라이브러리 설치 -> 사이트맵 페이지 작성 끝
라이브러리 설치
yarn
yarn add -D next-sitemap
npm
npm install --save-dev next-sitemap
사이트맵 페이지 작성
pages 폴더 내 사이트맵으로 보여질 파일을 생성한다.
소스 코드 살펴보면,
// pages/sitemap.xml.tsx
import { GetServerSidePropsContext } from 'next';
import { getServerSideSitemap } from 'next-sitemap'; //(1)
//(2)
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const posts = await fetcher('/posts');
const categories = await fetcher('/categories');
const lastmod = new Date().toISOString();
//(3), (4)
const defaultFields = [
{
loc: process.env.URL,
changefreq: 'daily',
priority: '0.8',
lastmod,
},
{
loc: `${process.env.URL}/example`,
changefreq: 'daily',
priority: '0.8',
lastmod,
},
];
//(5)
const categoryFields = categories.map((category: string) => ({
loc: `${process.env.URL}/${category}`,
changefreq: 'daily',
priority: '0.9',
lastmod,
}));
const boardFields = boards.map((board: IBoardSummary) => ({
loc: `${process.env.URL}/${board.category}/${board.id}`,
changefreq: 'daily',
priority: '1.0',
lastmod,
}));
//(6)
const fields = [...defaultFields, ...categoryFields, ...boardFields];
//(7)
return getServerSideSitemap(ctx, fields);
};
//(8)
export default () => {
return;
};next-sitemap 라이브러리의 내장함수로 첫번째 인자로 application/xml 응답헤더를, 두번째 인자로 사이트맵 xml 형식 데이터를 리턴해준다.
getServerSideProps를 통해 동적 사이트맵을 제작한다.
사이트맵 태그내 입력할 데이터를 객체형식으로 만들어주어야 한다.
loc : 페이지 url을 넣어준다. 개발 / 운영 환경 분리와 url 변경을 대비해 환경변수로 입력해두었다.
changefreq(optional) : 변경 빈도를 입력해준다.
always,hourly,daily,weekly,monthly,yearly,never중 하나를 문자열 형태로 입력하면 된다.priority(optional): 우선순위를 입력해준다. 기본값은 0.5이며 0.0 ~ 1.0까지 입력 가능하다.
lastmod(optional) : 마지막 수정 날짜를 입력해준다. 입력 가능한 형식은W3C Datetime이다.
api를 통해 불러올 수 없는 정적 페이지를 하드코딩 해준다.
api를 통해 불러온 게시판 배열과 게시글 배열을 map 함수를 통해 유효한 fields 객체 배열로 만들어준다.
스프레드 연산자를 통해 만들어 놓은 전체 fields를 합친다.
(1)에서 임포트 한 함수를 이용하여 xml문서로 리턴해준다.
리턴할 컴포넌트 객체는 없으므로 아무것도 리턴하지 않는 익명함수로 대체한다.
이렇게 하면 끝난다.
결과물
다음과 같이 생성한 파일의 결과물로 sitemap xml 문서를 확인 할 수 있다.
사이트맵 url에 접속하면,
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://www.example.com</loc>
<changefreq>daily</changefreq>
<priority>0.8</priority>
<lastmod>2022-03-18T13:52:05.199Z</lastmod>
</url>
<url>
<loc>https://www.example.com/example</loc>
<changefreq>daily</changefreq>
<priority>0.8</priority>
<lastmod>2022-03-18T13:52:05.199Z</lastmod>
</url>
<url>
<url>
<loc>https://www.example.com/category/1</loc>
<changefreq>daily</changefreq>
<priority>1.0</priority>
<lastmod>2022-03-18T13:52:05.199Z</lastmod>
</url>
</urlset>위와 같은 사이트맵 데이터가 출력된다.