Next.js에서 getStaticPaths와 next-sitemap을 사용한 동적 경로 사이트맵 생성하기

사전 준비

• next-sitemap 설치: 프로젝트에 next-sitemap을 설치한다.

npm install next-sitemap

동적 경로 정보 추출

1. getStaticPaths 사용: Next.js에서 동적 라우트를 사전 렌더링하기 위해 getStaticPaths를 사용한다. 이 함수는 빌드 시간에 필요한 모든 경로를 미리 정의할 수 있게 해준다.
예를 들어, 포스트의 동적 라우트를 처리하는 pages/posts/[id].js 파일에 다음과 같이 getStaticPaths를 구현할 수 있다.

export async function getStaticPaths() {
  const paths = await fetchDynamicPostPaths(); // 동적 포스트 경로를 가져오는 함수
  return {
    paths,
    fallback: false,
  };
}

이 함수는 사이트맵 생성에 필요한 경로 정보(paths)를 제공한다.

2. 동적 경로 정보 저장: 사이트맵 생성을 위해 getStaticPaths에서 얻은 경로 정보를 파일에 저장한다. 예를 들어, scripts/generateDynamicPaths.js 스크립트를 작성하여 실행시켜 이 정보를 dynamicPaths.json으로 저장할 수 있다.

const fs = require('fs');
const fetchDynamicPostPaths = async () => {
  // 외부 API 호출 또는 데이터베이스 쿼리를 통해 동적 경로 정보를 가져온다.
};

const saveDynamicPaths = async () => {
  const paths = await fetchDynamicPostPaths();
  fs.writeFileSync('dynamicPaths.json', JSON.stringify(paths), 'utf-8');
};

saveDynamicPaths();

next-sitemap 설정

1. 사이트맵 구성: 사이트 URL과 사이트맵 저장 위치 등 기본적인 사이트맵 설정을 한다.

module.exports = {
  siteUrl: 'https://yourdomain.com',
  generateRobotsTxt: true, // robots.txt 파일도 함께 생성
};

2. 동적 경로 추가: 사이트맵 생성 시 동적 경로를 포함시키기 위해 next-sitemap.config.js 파일에 additionalPaths 옵션을 사용한다.

const fs = require('fs');

module.exports = {
  siteUrl: 'https://yourdomain.com',
  generateRobotsTxt: true,
  additionalPaths: async (config) => {
    const dynamicPaths = JSON.parse(fs.readFileSync('dynamicPaths.json', 'utf-8'));
    return dynamicPaths.map((path) => ({ loc: path }));
  },
};

사이트맵 생성 및 검증

1. 사이트맵 생성: 모든 설정이 완료되면, 프로젝트 루트에서 next-sitemap을 실행하여 사이트맵을 생성한다. package.json에 다음 스크립트를 추가하여 간편하게 실행할 수 있다.

"scripts": {
  "generate-sitemap": "next-sitemap"
}

실행 명령어

npm run generate-sitemap

또는 package.json에 postbuild 스크립트를 추가하여 실행할 수 있다.

"scripts": {
  "postbuild": "node scripts/generateDynamicPaths.js && next-sitemap",
},

 

2. 사이트맵 검증: 생성된 사이트맵(sitemap.xml 및 기타 관련 파일)을 검토하여 동적 경로가 올바르게 포함되었는지 확인한다. 또한, Google Search Console을 사용하여 사이트맵을 제출하고, 문제가 없는지 검증할 수 있다.