next.js에서 정적인 sitemap.xml 생성하기

next.js에서 sitemap.xml 생성하기

이 방법은 static 파일로 추출하기 위한 방법이다.

devDependencies에 nextjs-sitemap-generator 추가

npm install --save-dev nextjs-sitemap-generator 

최상단 루트에 /next-sitemap-generator.js 생성

const sitemap = require('nextjs-sitemap-generator');
// const fs = require('fs');
// const BUILD_ID = fs.readFileSync('.next/BUILD_ID').toString();
sitemap({
  baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
  pagesDirectory: __dirname + '/.next/server/pages',
  targetDirectory: 'public/',
  ignoredExtensions: ['js', 'map'],
  ignoredPaths: ['[fallback]'],
});

• pagesDirectory: 해당 프로젝트의 .next 서버 경로 . 프로젝트가 실행되는 페이지들의 경로

• targetDirectory : sitemap.xml이 만들어질 경로. 보통 public 폴더에 생성함.

package.json의 script에 명령어 추가

"scripts": {
    "sitemap": "node ./next-sitemap-generator.js",
    }

npm run sitemap을 하면 public 폴더에 sitemap.xml이 생성된다.

빌드 할때마다 새롭게 sitemap.xml이 생성되게 자동화를 하려면 prebuild를 추가해준다.

prebuild는 npm run build시 build 가 실행되기 전에 먼저 실행된다.

"scripts": {
    "sitemap": "node ./next-sitemap-generator.js",
    "prebuild": "npm run sitemap",
    "build": "env-cmd -f ./.env.devleopment next build",  
    }

하지만 아래 코드처럼 build:dev:pack같이 build가 아닌 변형된 명령어 실행시 prebuild가 실행되지 않는다.

때문에 아래 코드에서는 build:dev:pack 안에 npm run sitemap가 먼저 실행되게 추가했다.

"scripts": {
    "sitemap": "node ./next-sitemap-generator.js",
    "build:dev:pack": "env-cmd -f ./.env.development npm run sitemap && next build && next export",
    "build:prod:pack": "env-cmd -f ./.env.production npm run sitemap && next build && next export",
  }