Nextjs sitemap robots.txt 자동화

Next.js로 개발한 웹서비스를 SEO 최적화하기 위해 서치하던 중,

robots.txt와 sitemap.xml 을 자동으로 생성해주는 npm 패키지를 발견했습니다.

(나만 모르던 패키지는 아니겠지...;()

 

로컬 개발 환경, 테스트 개발 환경, 실제 개발 환경 이렇게 총 3가지의 개발환경으로 구분하고 있고 CI/CD가 적용되어 있어서, 개발 환경마다 다르게 설정할 수 있으면 좋겠다 싶었는데 아주 잘 되더라구요. 만족하면서 production 버전에서도 사용하려 합니다 :) 

 

next-sitemap github 바로가기

 

globby를 사용해서 next.js 에 적용한 사례는 몇 있는데, next-sitemap을 사용한 예시는 별로 없고 한글은 더 없어서 중간에 삽질을 좀 오래 했습니다...

 

(1) next-sitemap을 이용해 개발 환경 별로 robots.txt, sitemap.xml 파일을 자동 생성하는 법,

(2) dynamic/server-side 등 동적인 페이지에 대해 sitemap.xml을 자동 생성하는 법(삽질포인트ㅜㅜ)을 풀어보겠습니다. 

 

---

 

next.js에서 개발 환경 별로 robots.txt, sitemap.xml 생성하기

1. npm 또는 yarn으로 next-sitemap 패키지를 설치합니다.

yarn add next-sitemap -D
또는 
npm i -D next-sitemap

 

2. 프로젝트 루트 디렉토리에서 개발환경 별로 config 파일을 생성합니다.

(예시)

- sitemap.config.js (for production)

- test-sitemap.config.js (for development & test)

 

(참고: 패키지 documentation 에서는 루트 디렉토리에 next-sitemap.js 파일을 생성하면 자동으로 .env 를 인식해서 사용할 수 있다고 합니다.)

 

3. 2에서 만든 파일에 config 를 추가합니다.

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true, // default: false, true 라고 설정해야 robots.txt 생성
  sitemapSize: 7000
}

 

이 때, 파일을 따로 만들어놨으니 개발 환경 별로 다르게 config 를 설정할 수 있습니다. 

예를 들어, production 일 경우에만 SEO 크롤링을 허용하고, 테스트나 개발환경에서는 막을 수도 있습니다.

 

4. package.json에 script를 추가합니다.

"postbuild": "next-sitemap --config next-sitemap.config.js"

build 이후에 자동으로 실행되는 스크립트입니다. --config 뒤에 원하는 파일 이름을 넣어주면 됩니다. 

postbuild 스크립트를 추가하고 build를 해보면 public 폴더 안에 robots.txt와 sitemap.xml이 생성된 것을 확인할 수 있습니다. 

 

공식문서에는 없지만 주의할 점은 이미 public 폴더 안에 파일이 있으면 빌드 오류가 발생합니다. 따라서 build 스크립트 안에 robots.txt 파일과 sitemap.xml 파일을 삭제하는 스크립트를 추가했습니다. 

(저는 rimraf 를 사용해서 삭제했습니다.)

 

개발 환경에 따라 다르게 실행할 때는 아래와 같습니다.

production 환경 이외에는 빌드할 때 적용할 .env 파일을 강제로 지정해주어야 합니다. 

 

▽ production 환경에서 build & postbuild 스크립트

"build": "rimraf public/robots.txt public/sitemap*.xml & next build",
"postbuild": "next-sitemap --config next-sitemap.config.js",

 

▽ development 환경에서 build & postbuild 스크립트

"build:dev": "rimraf public/robots.txt public/sitemap*.xml & env-cmd -f ./.env.development next build",
"postbuild:dev": "env-cmd -f ./.env.development next-sitemap --config test-sitemap.config.js",

 

---

SSR, ISR, Dynamic 페이지 등 동적인 페이지에 대해 sitemap 자동 생성하기

(공식 문서: https://github.com/iamvishnusankar/next-sitemap#generating-dynamicserver-side-sitemaps)

 

1. pages 폴더 안에 server-sitemap.xml/index.tsx 파일을 생성합니다.

 

2. 아래의 코드를 참고하여 파일에 작성합니다. 

// pages/server-sitemap.xml/index.tsx
import { getServerSideSitemap } from 'next-sitemap'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
   // Method to source urls from cms
   // const urls = await fetch('https//example.com/api')
   const fields = [
     {
       loc: 'https://example.com', // Absolute url
       lastmod: new Date().toISOString(),
       // changefreq
       // priority
     },
     {
       loc: 'https://example.com/dynamic-path-2', // Absolute url
       lastmod: new Date().toISOString(),
       // changefreq
       // priority
     },
   ]
   return getServerSideSitemap(ctx, fields)
 }
 
// Default export to prevent next.js errors
export default () => {}

△ server-sitemap.xml 페이지로 진입할 때마다 getServerSideProps 가 실행됩니다.

그 때마다 가능한 페이지 목록을 새로 불러와 server-sitemap.xml 파일을 완성하는 방식으로 동적인 페이지에 대해 대응합니다.

 

fields 안에는 사이트맵으로 구성할 페이지 정보들을 넣어주어야 합니다.

'Abslute url' 이라고 적혀져있듯, 정확한 url 정보를 array 형태로 만들어야 합니다. 

 

만약 api 서버에서 가능한 페이지 정보를 모두 받아온다면 (data)

map을 이용해 array를 완성하는 형식으로 사용할 수 있습니다.

 

이때, 위의 getServerSideProps 가 _document.tsx 파일의 getInitialProps 가 호출되기 전에 실행되기 때문에 주의해야 합니다. 

 

 

3. next-sitemap의 config 파일을 수정합니다. 

module.exports = {
    siteUrl: 'https://example.com',
    generateRobotsTxt: true,
    exclude: ['/server-sitemap.xml'], // <= exclude here
    robotsTxtOptions: {
    additionalSitemaps: [ 
      'https://example.com/server-sitemap.xml', // <==== Add here 
    ], 
  }, 
}

△ 자동 생성되는 server-sitemap.xml 파일을 exclude 하고, 계속 server-side rendering 되도록 유도합니다. 

 

이렇게까지 설정한 후에 빌드하고 실행한 후에 URL/server-sitemap.xml 에 접속하면 xml 형태로 사이트맵이 뜹니다. 만약 getServerSideProps 안에서 api 호출이 있다면, server-sitemap.xml 페이지가 렌더링 될 때마다 api 호출이 발생하는 것을 확인할 수 있습니다. (봇이 크롤링을 위해 접근하면 그 때마다 가능한 페이지를 사이트맵으로 만들어 동적인 페이지에 대응하는 것 같습니다.) 

 

---

 

Next.js는 참 좋은 데 한국에서 아직은 사용하시는 분이 체감상 많은 것 같지는 않습니다. 혹시 next를 사용해서 seo 적용하시려는 분이 있다면 조금이나마... 삽질을 줄이는 데 도움이 되었으면 좋겠습니다 : )