← 전체 글로 돌아가기

Next.js

개인 블로그에 RSS 피드를 붙이면 달라지는 것

블로그를 만들고 나서 RSS를 늦게 추가했다. 구현 자체는 간단한데, 붙이고 나서 콘텐츠가 자동으로 퍼지기 시작했다.

Next.js로 블로그를 처음 만들 때 RSS는 나중에 해야지 하고 미뤄뒀다. 나중에 추가하고 나서 생각보다 효과가 있었다. Feedly, Reeder 같은 RSS 리더 사용자들이 구독하고, 일부 뉴스레터 집계 서비스가 자동으로 내 글을 가져가기 시작했다.

Next.js에서 RSS 피드 만들기

별도 라이브러리 없이도 만들 수 있지만 feed 패키지를 쓰면 편하다.

npm install feed
// app/rss.xml/route.ts
import { Feed } from 'feed';
import { getAllPosts } from '@/lib/posts';

export async function GET() {
  const posts = await getAllPosts();
  const siteUrl = 'https://example.com';

  const feed = new Feed({
    title: '블로그 이름',
    description: '블로그 설명',
    id: siteUrl,
    link: siteUrl,
    language: 'ko',
    copyright: `${new Date().getFullYear()} 블로그 작성자`,
    updated: new Date(posts[0].publishedAt),
  });

  for (const post of posts) {
    feed.addItem({
      title: post.title,
      id: `${siteUrl}/posts/${post.slug}`,
      link: `${siteUrl}/posts/${post.slug}`,
      description: post.excerpt,
      content: post.content,
      date: new Date(post.publishedAt),
    });
  }

  return new Response(feed.rss2(), {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 's-maxage=3600',
    },
  });
}

피드를 HTML에 알린다

RSS 피드 URL을 브라우저와 리더가 자동으로 찾을 수 있도록 <head>에 link 태그를 추가한다.

// app/layout.tsx
<head>
  <link
    rel="alternate"
    type="application/rss+xml"
    title="블로그 이름"
    href="/rss.xml"
  />
</head>

이 태그가 있으면 일부 브라우저 확장이나 리더 앱이 피드를 자동으로 감지한다.

주의할 것

  • 초안 포스트 필터링 — 비공개 글이 피드에 포함되지 않도록 getAllPosts 단계에서 걸러낸다.
  • 발행일 정확도publishedAt 필드가 잘못되어 있으면 리더에서 글 순서가 뒤섞인다.
  • 피드 URL은 바꾸지 않는다/rss.xml로 한 번 정하면 유지한다. 바꾸면 기존 구독자가 끊어진다.
  • 전문 포함 여부 — excerpt만 넣으면 리더에서 클릭해야 내용을 볼 수 있다. 독자 경험 면에서는 전문을 넣는 쪽이 낫다.

캐시 헤더를 적절히 설정해두면 피드를 자주 요청하는 봇이 생겨도 서버 부하가 크게 늘지 않는다.