Next.js App Router에서 Sitemap과 Robots.txt 100% 자동 생성하여 검색 노출 높이기

블로그나 웹 사이트를 열심히 만든 후 구글 서치 콘솔(Google Search Console)이나 네이버 서치어드바이저에 등록할 때 가장 기본이 되는 서류는 바로 **사이트맵(Sitemap.xml)**과 **수집 로봇 안내서(Robots.txt)**입니다.

새로운 글을 포스팅할 때마다 매번 XML 파일을 사람이 직접 수정하는 것은 매우 번거롭고 실수하기 쉽습니다. Next.js 13+ App Router에서는 코드 몇 줄로 수백 개 포스트의 URL이 담긴 sitemap.xml과 robots.txt를 100% 자동으로 생성해 줍니다. 바로 적용해 보겠습니다.

1. app/sitemap.ts 동적 사이트맵 자동 생성

app 디렉토리 최상위에 sitemap.ts (또는 .js) 파일을 작성합니다. Next.js가 빌드 및 요청 시 해당 파일의 리턴값을 해석해 /sitemap.xml 경로로 자동 변환합니다.

import { MetadataRoute } from 'next';
import { getAllPosts } from '@/lib/posts'; // 포스트 목록을 가져오는 함수 (예시)

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://yourdomain.com';

  // 1. 블로그 포스트 데이터 가져오기
  const posts = await getAllPosts();
  const postUrls = posts.map((post) => ({
    url: `${baseUrl}/posts/${post.slug}`,
    lastModified: new Date(post.date),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));

  // 2. 고정 메인 페이지 및 주요 카테고리 URL
  const routes = ['', '/posts', '/about'].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: 'daily' as const,
    priority: 1.0,
  }));

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

• 포인트: changeFrequency(변경 주기)와 priority(우선순위)를 설정해 주면 검색엔진 수집 로봇이 효율적으로 क्र롤링을 진행합니다.

2. app/robots.ts 수집 규정 자동 생성

app 디렉토리 최상위에 robots.ts 파일을 만듭니다.

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  const baseUrl = 'https://yourdomain.com';

  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/'], // 검색 노출을 원치 않는 관리자/API 경로 차단
    },
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}

이 파일은 배포 시 자동으로 https://yourdomain.com/robots.txt 파일로 매핑되어 모든 크롤러에게 사이트맵 위치를 명확히 전달합니다.

3. 적용 및 검증 방법

1. npm run build 실행 후 서버를 엽니다.
2. 브라우저 주소창에 http://localhost:3000/sitemap.xml 및 http://localhost:3000/robots.txt에 접속합니다.
3. 깔끔하고 완전한 XML 데이터 및 Robots 텍스트 문서가 렌더링되는지 확인합니다.
4. 구글 서치 콘솔에 접속하여 https://yourdomain.com/sitemap.xml 주소를 제출합니다.

💡 마무리하며

SEO(검색엔진 최적화)의 시작과 끝은 검색엔진 크롤링 로봇이 내 사이트의 새로운 포스트를 **"얼마나 빠르고 지체 없이 수집해 가는가"**에 달려 있습니다. Next.js의 내장 파일 기반 SEO 지원 기능을 활용하여 자동화 시스템을 완성해 보세요!