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만 넣으면 리더에서 클릭해야 내용을 볼 수 있다. 독자 경험 면에서는 전문을 넣는 쪽이 낫다.
캐시 헤더를 적절히 설정해두면 피드를 자주 요청하는 봇이 생겨도 서버 부하가 크게 늘지 않는다.