Додаємо RSS feed до nextjs SSG додатка

RSS дозволяє користувачам підписатись на оновлення матеріалів вашого сайту і отримувати цю інформацію будь яким зручним для нього способом.

Про те як додати RSS feed до вашого сайту cтвореному на основі Nextjs я спробую описати в даному матеріалі.

RSS Icon

За для спрощення реалізації ми використаємо npm модуль “rss”. То ж встановлюємо npm i -S rss, а також npm i -D @types/rss, якщо Typescript.

Далі необхідно створити фукцію що буде генерувати rss.xml файл в момент білда.

import fs from 'fs';
import RSS from 'rss';

type Article = {
  title: string;
  intro: string;
  permalink: string;
  publishedAt: string;
  keywords?: string[];
};

const ORIGIN = 'https://yourblog.com';

export default async function generateRssFeed(articles: Article[]) {
  const feed = new RSS({
    title: 'yourblog.com',
    description: 'Here I write something',
    site_url: ORIGIN,
    feed_url: `${ORIGIN}/rss.xml`,
    image_url: `${ORIGIN}/logo.jpeg`,
    generator: 'yourblog.com',
    pubDate: new Date(),
    copyright: `All rights reserved ${new Date().getFullYear()}`,
  });

  // Add each individual post to the feed.
  articles.map(({title, intro, keywords, permalink, publishedAt}) => {
    feed.item({
      url: ORIGIN + permalink,
      title,
      description: intro,
      categories: keywords,
      date: publishedAt,
    });
  });

  // Write the RSS feed to a file as XML.
  fs.writeFileSync('./public/rss.xml', feed.xml({indent: true}));
}

і потім цю функцію викликаємо

// src/pages/index.tsx

// This function gets called at build time
export async function getStaticProps() {
  await generateRssFeed(getAllArticles());
  /** Do your job */
}

Також, для того щоб всякі rss рідери могли побачити що даний сайт надає rss feed, потрібно це задекларувати метатегом.

import Head from 'next/head';

<Head>
  {/** other metatags */}
  <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="My RSS feed" />
</Head>;

От, власне, і всьо.

Джерела