검색엔진 상위 노출을 위한 Next.js 15 dynamic Sitemap & Robots.txt 완벽 가이드

Nextjs SEO sitemap

웹 사이트를 열심히 만들어 배포했더라도 구글이나 네이버 같은 검색엔진에 노출되지 않는다면 무용지물에 가깝습니다. 웹 사이트의 검색엔진 최적화(SEO, Search Engine Optimization)의 첫걸음은 검색 로봇(Crawlers)이 내 사이트의 구조를 쉽게 파악하고 크롤링할 수 있도록 길잡이 역할을 해주는 **sitemap.xml**과 **robots.txt**를 올바르게 구축하는 것입니다.

특히 블로그나 이커머스처럼 매일 새로운 콘텐츠가 생성되어 URL이 동적으로 추가되는 사이트는 정적(Static)으로 사이트맵을 작성하면 새 글이 누락되기 쉽습니다.

Next.js 15(App Router) 환경에서 매번 수작업 없이 데이터베이스와 파일 시스템의 실시간 변경을 감지하여 동작하는 동적 사이트맵과 로봇 배제 표준 파일을 구축하는 완벽한 실무 팁을 소개합니다.

1. Robots.txt 자동 생성하기

Next.js App Router에서는 app/robots.ts 파일을 생성하여 자바스크립트 객체 형식으로 선언해 주기만 하면, 프레임워크가 빌드 타임 혹은 요청 타임에 자동으로 표준 robots.txt 파일로 변환하여 서빙해 줍니다.

실전 코드 예시 (app/robots.ts):

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: [
        '/api/',       // API 라우터 크롤링 제외
        '/admin/',     // 관리자 페이지 제외
        '/private/',   // 개인정보 관련 페이지 제외
      ],
    },
    sitemap: 'https://goldenwhale.co.kr/sitemap.xml',
  };
}

2. Dynamic Sitemap.xml 완벽 구현

마찬가지로 app/sitemap.ts 파일을 생성하면 사이트의 정적 페이지(홈, 어바웃, 정책 등)뿐만 아니라 외부 API나 파일 시스템(마크다운 등)으로부터 글 목록 데이터를 긁어와 동적으로 사이트맵 리스트를 병합 생성할 수 있습니다.

실전 코드 예시 (app/sitemap.ts):

import { MetadataRoute } from 'next';
import { getSortedPostsData } from '@/lib/posts'; // 포스트 데이터 헬퍼 함수 임포트

const BASE_URL = 'https://goldenwhale.co.kr';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // 1. 정적 기본 페이지 정의
  const routes = ['', '/about', '/contact', '/privacy-policy'].map((route) => ({
    url: `${BASE_URL}${route}`,
    lastModified: new Date().toISOString().split('T')[0],
    changeFrequency: 'weekly' as const,
    priority: route === '' ? 1 : 0.8,
  }));

  // 2. 외부 마크다운 파일 또는 DB로부터 포스트 슬러그 추출
  const allPosts = getSortedPostsData();
  const postRoutes = allPosts.map((post) => ({
    url: `${BASE_URL}/post/${post.slug}`,
    lastModified: post.date, // 글 수정일 또는 발행일 매핑
    changeFrequency: 'monthly' as const,
    priority: 0.6,
  }));

  return [...routes, ...postRoutes];
}

3. 제대로 적용되었는지 검증 및 검색엔진 제출하기

코드를 작성하고 로컬 환경(npm run dev)을 켠 뒤 브라우저를 통해 정상적으로 렌더링되는지 최종 확인을 진행합니다.

결과물 확인:
- http://localhost:3000/robots.txt 접속 ➔ 텍스트 파일로 규칙이 렌더링되는지 확인.
- http://localhost:3000/sitemap.xml 접속 ➔ XML 구조로 각 정적/동적 URL 경로들이 누락 없이 계층형으로 노출되는지 확인.
검색엔진 웹마스터 도구에 제출:
- 서비스를 실 서버에 배포한 후, 구글 서치 콘솔(Google Search Console) 및 네이버 서치어드바이저에 접속하여 사이트 소유권 확인을 진행합니다.
- 좌측의 'Sitemaps' 메뉴로 이동하여 내 도메인 뒤에 sitemap.xml 경로를 입력하고 제출(Submit) 버튼을 누르면 검색엔진 로봇이 수일 내에 사이트를 방문하여 색인을 생성하기 시작합니다.

✍️ 글을 마치며

SEO 최적화는 훌륭한 콘텐츠를 작성하는 것만큼이나, 검색 로봇이 내 콘텐츠를 잘 긁어갈 수 있도록 **기술적 사다리(Technical SEO)**를 견고하게 놓아주는 작업이 중요합니다.

Next.js 15가 제공하는 내장 헬퍼 함수(robots.ts, sitemap.ts)들을 활용하여 수작업 번거로움 없이 완전히 자동화된 SEO 크롤링 환경을 손쉽게 구축해 보시기 바랍니다!