Published on

Next.js RSS 생성 문법

Authors
  • Name
    기술 라이브러리
    Twitter

Next.js에서 RSS 피드를 생성하는 방법은 크게 두 가지로 나눌 수 있습니다.

API Routes 활용: Next.js의 API Routes 기능을 사용하여 RSS 피드를 동적으로 생성하는 방법입니다. 서버 사이드에서 RSS 데이터를 생성하여 XML 형식으로 응답합니다.

정적 파일 생성: getStaticPaths 와 getStaticProps 를 사용하여 빌드 시점에 RSS 피드 XML 파일을 생성하는 방법입니다. 게시글 업데이트가 잦지 않다면 이 방법도 효율적입니다.

API Routes를 이용한 RSS 피드 생성 방법 (동적 생성)

API Routes를 사용하면 /pages/api 디렉토리 안에 Javascript 또는 Typescript 파일을 만들어 API 엔드포인트를 정의할 수 있습니다. 이 API 엔드포인트에서 RSS 피드를 생성하고 반환하도록 구현할 수 있습니다.

예시 코드 (generate-rss.js):

import { escape } from '@/lib/utils/htmlEscaper'

import siteMetadata from '@/data/siteMetadata'

const generateRssItem = (post) => `
  <item>
    <guid>${siteMetadata.siteUrl}/blog/${post.slug}</guid>
    <title>${escape(post.title)}</title>
    <link>${siteMetadata.siteUrl}/blog/${post.slug}</link>
    ${post.summary && `<description>${escape(post.summary)}</description>`}
    <pubDate>${new Date(post.date).toUTCString()}</pubDate>
    <author>${siteMetadata.email} (${siteMetadata.author})</author>
    ${post.tags && post.tags.map((t) => `<category>${t}</category>`).join('')}
  </item>
`

const generateRss = (posts, page = 'feed.xml') => `
  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
      <title>${escape(siteMetadata.title)}</title>
      <link>${siteMetadata.siteUrl}/blog</link>
      <description>${escape(siteMetadata.description)}</description>
      <language>${siteMetadata.language}</language>
      <managingEditor>${siteMetadata.email} (${siteMetadata.author})</managingEditor>
      <webMaster>${siteMetadata.email} (${siteMetadata.author})</webMaster>
      <lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>
      <atom:link href="${siteMetadata.siteUrl}/${page}" rel="self" type="application/rss+xml"/>
      ${posts.map(generateRssItem).join('')}
    </channel>
  </rss>
`
export default generateRss

참고 자료

Discuss on Twitter • View on GitHub