Додаємо RSS feed до nextjs SSG додатка
RSS дозволяє користувачам підписатись на оновлення матеріалів вашого сайту і отримувати цю інформацію будь яким зручним для нього способом.
Про те як додати RSS feed до вашого сайту cтвореному на основі Nextjs я спробую описати в даному матеріалі.
За для спрощення реалізації ми використаємо 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>;От, власне, і всьо.