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

Go to main page

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

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

RSS Icon

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

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

1import fs from 'fs';
2import RSS from 'rss';
3
4type Article = {
5  title: string;
6  intro: string;
7  permalink: string;
8  publishedAt: string;
9  keywords?: string[];
10};
11
12const ORIGIN = 'https://yourblog.com';
13
14export default async function generateRssFeed(articles: Article[]) {
15  const feed = new RSS({
16    title: 'yourblog.com',
17    description: 'Here I write something',
18    site_url: ORIGIN,
19    feed_url: `${ORIGIN}/rss.xml`,
20    image_url: `${ORIGIN}/logo.jpeg`,
21    generator: 'yourblog.com',
22    pubDate: new Date(),
23    copyright: `All rights reserved ${new Date().getFullYear()}`,
24  });
25
26  // Add each individual post to the feed.
27  articles.map(({title, intro, keywords, permalink, publishedAt}) => {
28    feed.item({
29      url: ORIGIN + permalink,
30      title,
31      description: intro,
32      categories: keywords,
33      date: publishedAt,
34    });
35  });
36
37  // Write the RSS feed to a file as XML.
38  fs.writeFileSync('./public/rss.xml', feed.xml({indent: true}));
39}

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

1// src/pages/index.tsx
2
3// This function gets called at build time
4export async function getStaticProps() {
5  await generateRssFeed(getAllArticles());
6  /** Do your job */
7}

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

1import Head from 'next/head';
2
3<Head>
4  {/** other metatags */}
5  <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="My RSS feed" />
6</Head>;

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

Джерела