NextJS 사이트맵(Site Map) 만들기

(해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.)

 

1. Site Map은 왜?

모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다.

바로 사이트맵을 생성하는 일이다.

물론 사이트맵을 생성하지 않는 방법도 있다.

 

실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다.

• 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다.
• 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다.
• 연결되는 외부 링크가 많지 않은 새로운 사이트. Googlebot 및 기타 웹 크롤러는 한 페이지에서 다른 페이지로 연결되는 링크를 따라 이동하여 웹을 크롤링합니다. 따라서 다른 사이트가 링크되어 있지 않으면 Google에서 페이지를 찾지 못할 수 있습니다.
• 리치 미디어 콘텐츠(동영상, 이미지)가 많거나 Google 뉴스에 표시되는 사이트. Google에 사이트맵의 추가 정보를 제공하면 검색에 적절하게 사용할 수 있습니다.

다음과 같은 경우 사이트맵이 필요하지 않을 수 있습니다.

• 크기가 '작은' 사이트. 이는 사이트에 있는 페이지가 500개 이하임을 의미합니다. 페이지 합계에는 검색 결과에 표시되어야 한다고 생각하는 페이지만 포함됩니다.
• 내부적으로 긴밀히 연결된 사이트. Google은 홈페이지에서 시작되는 링크를 따라가서 사이트에 있는 중요한 페이지를 모두 발견할 수 있습니다.
• 검색 결과에 표시하려는 미디어 파일(동영상, 이미지) 또는 뉴스 페이지가 많지 않음. 사이트맵은 Google이 사이트의 동영상, 이미지 파일 또는 뉴스 기사를 찾고 이해하는 데 도움을 줍니다. 사이트의 이미지, 동영상 또는 뉴스가 관련 검색 결과에 표시되지 않아도 된다면 사이트맵을 사용하지 않아도 됩니다.

대부분 제작하는 페이지의 경우 사이트맵의 제작이 필요 없는 경우가 많은 경우가 다수이지만, 생각보다 간단한 방법으로 사이트맵을 생성할 수 있기 때문에 그 방법을 소개하고자 한다.

2. next-sitemap 사용하기

대부분의 react에서 사이트맵을 생성하는 경우 globby 등을 사용해 script를 생성해 실행해주는 방법으로 많이 하는데 그런 과정을 자동화에 가깝게 할 수 있는 라이브러리가 next-sitemap이다.

 

그럼 next-sitemap을 통해 사이트맵을 생성해보자.

npm i next-sitemap || yarn add next-sitemap

1) 정적 페이지 사이트맵 생성

설치가 완료되면 사이트맵 생성을 위해 next-sitemap.config.js파일을 생성해준다.

/** @type {import('next-sitemap').IConfig} */
const config = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

export default config

siteUrl은 사이트 맵을 생성하고자 하는 site의 주소를 입력해 주면 되고 generateRobotsTxt의 경우 Robots.txt 파일을 자동 생성해 주는 것을 뜻한다.

 

공식 홈페이지에서는 위와 같은 방식으로 생성하라고 설명하는데 이렇게 하면 nextjs의 경우 설정 파일의 실행의 경우 module 방식이 아니기 때문에 에러가 발생한다.

 

그러니 아래와 같이 module.exports 방식으로 생성해 준다.

module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000/',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

그리고 package.json의 script에 아래와 같이 추가해 준다.

{
  ...
  "build": "next build",
  "postbuild": "next-sitemap"
  ...
}

나는 개인적으로 next-sitemap.config.js라는 이름이 마음에 들지 않아 sitemap.config.js라는 이름으로 파일 이름을 변경한 뒤 아래와 같이 수정해 주었다.

{
 ...
 "postbuild": "next-sitemap --config sitemap.config.js",
}

이렇게 하면 정적 페이지에 대한 사이트맵 생성은 끝이 난다.

2) 동적 페이지 사이트맵 생성하기

이제 NextJS의 가장 좋은 특징 중 하나인 동적 페이지에 대한 사이트맵 생성을 해보겠다.

 

[id].tsx와 같은 이름으로 id가 달라지는 다양한 페이지를 한 번에 생성할 수 있다는 장점이 있지만 사이트맵을 생성할 때는 실제 존재하는 페이지를 모두 입력해주지 않으면 안 된다는 단점이 있다.

 

그리고 그런 상황에 사용할 수 있도록 next-sitemap 라이브러리에는 동적인 url에 대한 사이트맵을 생성하는 방법이 존재한다.

 

가장 먼저 pages > server-sitemap.xml > index.tsx의 경로로 동적 경로에 대한 사이트맵을 생성할 경로를 설정한다.

그리고 아래와 같은 방식으로 주소를 가지고 와 준다.

import { GetServerSideProps } from 'next';
import { getServerSideSitemap } from 'next-sitemap';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const posts = [...Array(5)].map((_, i) => i);
  const newsSitemaps = posts.map((id) => ({
    loc: `${process.env.NEXT_PUBLIC_DOMAIN_URL || 'http://localhost:3000/'}${id.toString()}`,
    lastmod: new Date().toISOString(),
  }));

  const fields = [...newsSitemaps];

  return getServerSideSitemap(ctx, fields);
};

export default function Site() {}

아쉽게도 사용자가 접속하는 것과 같은 방법으로 자동으로 생성하는 방법은 찾지 못하였지만 위의 방법을 통해 동적인 페이지들의 sitemap정보를 가지고 올 수 있다.

 

여기서 추천하는 방법은 backend에서 불러오고자 하는 동적 페이지의 id값 만을 배열로 보내주는 API를 생성하는 것이다.

이제 동적으로 변경될 sitemap까지 모두 설정했으니 아래와 같이 config를 수정해 준다.

module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000/',
  generateRobotsTxt: true,
robotsTxtOptions: {
    policies: [
      { userAgent: '*', allow: '/' },
    ],
    additionalSitemaps: [`${process.env.SITE_URL || 'http://localhost:3000/'}server-sitemap.xml`],
  },
}

이제 이렇게 수정하며 build를 진행하고 public > robots.txt를 확인했을 때 아래와 같은 파일이 생성된다.

# *
User-agent: *
Allow: /

# Host
Host: http://localhost:3000/

# Sitemaps
Sitemap: http://localhost:3000/sitemap.xml
Sitemap: http://localhost:3000/server-sitemap.xml

3) 추가하면 좋은 설정

마지막으로 최종적인 나의 설정 파일을 공유하는 것으로 끝내겠다.

const siteUrl = process.env.NEXT_PUBLIC_DOMAIN_URL || 'http://localhost:3000/';
module.exports = {
  siteUrl,
  exclude: ['/404'],
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        disallow: ['/404'],
      },
      { userAgent: '*', allow: '/' },
    ],
    additionalSitemaps: [`${siteUrl}server-sitemap.xml`],
  },
};

404 주소의 경우 sitemap과 robots에서 제외하는 설정이 추가되었다.