[Next.js] RSS, Feed(피드) 설정방법

Next.js RSS 및 Feed 통합은 웹 사이트 콘텐츠를 전달하는 방식을 혁신적으로 바꾸는 테크놀로지 중 하나입니다. 이 기사에서는 웹 사이트를 최적화하는 데 Next.js RSS 피드를 사용하는 포괄적인 가이드를 소개하며 사용자 경험을 향상시키고 동적 콘텐츠 업데이트의 혜택을 제공합니다.

[Next.js] RSS, Feed(피드)

RSS란?

RSS는 Rich Site Summary 또는 Really Simple Syndication의 약자로, 웹사이트의 새로운 콘텐츠를 요약하여 제공하는 XML 기반의 콘텐츠 표현 방식입니다. RSS를 이용하면, 사용자가 관심 있는 웹사이트의 새로운 콘텐츠를 한눈에 확인할 수 있습니다.

RSS는 다음과 같은 특징을 가지고 있습니다.

• 웹사이트의 새로운 콘텐츠를 요약하여 제공합니다.
• XML 기반으로 제작되어, 다양한 플랫폼에서 사용할 수 있습니다.
• RSS 리더를 이용하여 쉽게 확인할 수 있습니다.

RSS는 뉴스, 블로그, 팟캐스트 등 다양한 웹사이트에서 사용되고 있습니다. 예를 들어, 네이버 뉴스의 RSS를 구독하면, 네이버 뉴스에 새롭게 등록된 기사를 한눈에 확인할 수 있습니다. RSS를 사용하려면, RSS를 제공하는 웹사이트에서 RSS 주소를 확인한 후, RSS 리더에 RSS 주소를 등록하면 됩니다. RSS 리더는 웹기반형과 설치형이 있습니다.

RSS를 사용하면, 다음과 같은 장점이 있습니다.

• 관심 있는 웹사이트를 자주 방문하지 않아도, 새로운 콘텐츠를 빠르게 확인할 수 있습니다.
• 여러 웹사이트의 새로운 콘텐츠를 한곳에서 확인할 수 있습니다.
• RSS 리더를 이용하면, 다양한 기능을 활용하여 콘텐츠를 편리하게 확인할 수 있습니다.

RSS는 웹 콘텐츠를 효율적으로 소비하기 위한 유용한 방법입니다.

Feed(피드)란?

피드(feed)는 스크롤해서 볼 수 있는 콘텐츠의 스트림입니다. 피드에서는 콘텐츠가 비슷하게 생긴 블록으로 표시됩니다. 피드에는 편집 피드(예: 기사나 뉴스 목록)와 목록 피드(예: 제품, 서비스 등의 목록) 등이 있습니다. 피드는 페이지의 어디에나 표시될 수 있습니다.

웹사이트의 피드

피드는 다양한 용도로 사용될 수 있습니다. 예를 들어, 뉴스 웹사이트는 최신 기사를 피드로 제공하여 사용자들이 빠르게 최신 정보를 확인할 수 있도록 합니다. 소셜 미디어 플랫폼은 사용자가 팔로우하는 사용자의 게시물을 피드로 제공하여 사용자가 관심 있는 콘텐츠를 한눈에 확인할 수 있도록 합니다.

피드의 장점은 다음과 같습니다.

• 콘텐츠의 업데이트를 쉽게 확인할 수 있습니다. 피드는 콘텐츠가 업데이트되면 자동으로 새로운 콘텐츠가 표시되기 때문에, 사용자는 콘텐츠를 자주 방문하지 않아도 최신 정보를 확인할 수 있습니다.
• 관심 있는 콘텐츠를 한눈에 확인할 수 있습니다. 피드는 사용자가 관심 있는 콘텐츠를 한곳에 모아 보여주기 때문에, 사용자는 여러 웹사이트를 방문하지 않아도 원하는 콘텐츠를 빠르게 확인할 수 있습니다.

피드는 사용자의 콘텐츠 소비 방식을 변화시킨 중요한 기술입니다. 피드를 통해 사용자는 관심 있는 콘텐츠를 더욱 쉽게 접하고, 최신 정보를 빠르게 확인할 수 있습니다.

Next.js에서 RSS, Feed 설정방법

Page Router 설정방법(13버전 이전)

1. RSS패키지(npm) 라이브러리 설치
2. /pages/api 디렉터리 에 rss.xml.ts 라는 API 경로를 생성합니다 . API 경로에 익숙하지 않다면 여기에서 읽어보세요.
3. rss.xml.ts 의 구현 예는 다음과 같습니다.

/pages/api/rss.xml.ts

import { NextApiHandler } from 'next';
import RSS from 'rss';

import { notesApi } from '../../lib/notesApi';

const rss: NextApiHandler = async (req, res) => {
  const feed = new RSS({
    title: 'Bartosz Jarocki',
    site_url: 'https://jarocki.me',
    feed_url: 'https://jarocki.me/api/rss.xml',
  });

  // get all entries you want to be included in RSS feed
  const allPosts = await notesApi.getNotes();
  allPosts.map((post) => {
    feed.item({
      title: post.title,
      url: `https://jarocki.me/notes/${post.slug}`,
      date: post.publishedAt,
      description: post.description,
    });
  });

  res.setHeader('Content-Type', 'text/xml');
  // configure the cache 
  res.setHeader('Cache-Control', 'public, s-maxage=1200, stale-while-revalidate=600');
  // actually write the RSS feed as formatted XML
  res.write(feed.xml({ indent: true }));
  res.end();
};

export default rss;

전체 구현은 여기에서 확인할 수 있습니다. 다음으로는 미들웨어를 만들어줍니다.

// (root)middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/rss.xml')) {
    return NextResponse.rewrite(new URL('/api/rss.xml', request.url));
  }
}

App Router 설정방법(13버전 이후)

1. 마찬가지로 RSS패키지(npm) 라이브러리 설치
2. app 폴더에 feed.xml 폴더를 만들고 그 안에 route.ts 파일을 만들어줍니다

// app/feed.xml/route.ts

import RSS from "rss";
import contentExample from "@/src/data/contentExample.json";
import tagData from "@/src/data/tag-data.json";

export async function GET() {
  const feed = new RSS({
    title: "nextjs-shadcnui-title",
    description: "nextjs-shadcnui-description",
    site_url: "nextjs-shadcnui-site_url",
    feed_url: "nextjs-shadcnui-title/feed.xml",
    copyright: "@de24world",
    language: "en",
    pubDate: new Date(),
  });

// 아래의 데이터는 mock 데이터로 map을 이용하여 데이터를 불러와 만들어주면 됩니다.
  contentExample.list.map((blog) => {
    feed.item({
      title: blog.title,
      description: blog.description,
      url: `${process.env.SITENAME}/blog/${blog.link_slug}`,
      date: blog.date,
    });
  });

  Object.keys(tagData.object).map((tag): any => {
    feed.item({
      title: tag,
      description: tag + " more about description about tag",
      url: `${process.env.SITENAME}/tag/${tag}`,
      date: new Date(),
    });
  });

  return new Response(feed.xml(), {
    headers: {
      "Content-Type": "application/atom+xml; charset=utf-8",
    },
  });
}

FAQ

• Next.js RSS 피드가 SEO를 어떻게 향상시키나요?
  • Next.js RSS 피드는 실시간 업데이트를 통해 SEO에 중요한 역할을 하며 검색 엔진의 주목을 끌고 전반적인 웹 사이트 가시성을 향상시킵니다.
• Next.js RSS 피드는 모든 종류의 웹 사이트에 적합한가요?
  • 절대로 가능합니다! Next.js RSS 피드는 다양하며 블로그부터 전자 상거래 플랫폼까지 다양한 유형의 웹 사이트에 원활하게 통합될 수 있습니다.
• Next.js RSS 피드의 모양을 웹 사이트에 맞게 사용자 정의할 수 있나요?
  • 네, 맞춤화 옵션이 풍부합니다. Next.js RSS 피드의 모양을 웹 사이트의 디자인과 브랜딩에 맞게 조정할 수 있습니다.
• Next.js RSS 피드가 웹 사이트 로딩 속도에 영향을 미치나요?
  • 아니요, 올바르게 구현된 경우 Next.js RSS 피드는 웹 사이트 로딩 속도에 미미한 영향을 미칩니다. 최적의 성능을 위해 설계되었습니다.
• Next.js RSS 피드의 콘텐츠를 얼마나 자주 업데이트해야 하나요?
  • 업데이트의 빈도는 웹 사이트의 콘텐츠 전략에 따라 달라집니다. 정기적인 업데이트는 대상이 신선하고 관련성 있는 정보와 관련이 있도록 보장합니다.
• Next.js RSS 피드 통합 시 보안 고려 사항이 있나요?
  • 보안은 최우선입니다. Next.js RSS 피드 통합이 웹 사이트와 사용자 데이터를 보호하기 위해 최선의 방법을 따르도록 보장하세요.

결론

총론적으로 Next.js RSS 피드를 채택하면 웹 사이트가 동적 콘텐츠 전달과 사용자 참여의 새로운 시대로 도약할 수 있습니다. 혁신적인 통합의 힘을 이용하여 경쟁이 치열한 온라인 환경에서 한 발 앞서 나가보세요.

 

참조 사이트

https://jarocki.me/notes/next-js-rss-feed

https://spacejelly.dev/posts/sitemaps-rss-feeds-with-next-js-app-router/