دعم rss feeds في مشروع nextjs
إن من الأدوات المفيدة لإبقاء قراء و زوار الموقع على إطلاع بأحدث التدوينات و الأخبار دون الحاجة منهم إلى زيارته يدويًا باستمرار هي RSS، حيث تسمح لهم بمعرفة آخر التدوينات و الأخبار المطروحة بشكل تلقائي، و هو أمر جيد كذلك لزيادة عدد الزيارات و الزوار لموقعك بطريقة غير مُباشرة، و في هذه التدوينة سنتطرق إلى ما هو RSS و كيفية إضافته لمشروع Next.js.
ما هو RSS؟
RSS (Really Simple Syndication) هو تنسيق موجز ويب يُستخدم لنشر المحتوى الذي يتم تحديثه بشكل متكرر، مثل منشورات المدونات و المقالات الإخبارية و البودكاست، بطريقة موحدة يمكن قراءتها بسهولة من خلال التطبيقات الأخرى. فهو يتيح للمستخدمين الإشتراك في مواقع الويب المفضلة لديهم و تلقي التحديثات تلقائيًا، مما يجعلها أداة قيمة لكل من مالكي مواقع الويب والقراء.
فوائد استخدام خدمة RSS
هناك عدة أسباب تجعل إضافة RSS على الموقع الخاص بك مُفيدًا، فإنه يسهل على القراء و الأشخاص الذين يفضّلون RSS Reader البقاء على إطلاع بآخر تحديثات للمحتوى الموجود في موقعك، دون الحاجة منهم إلى التحقّق من موقعك عبر زيارته يدويًا، و بذلك يمكن أن يُؤدي ذلك إلى زيادة عدد الزيارات للموقع، حيث من المُرجّح أن يقرأ الزائر و القارئ المحتوى الخاص بك بإنتظام.
بالإضافة إلى ذلك يمكن أن تساعد RSS في زيادة ظهور الموقع و مدى وصوله، من خلال مشاركة المحتوى مع مواقع و منصات الأخرى، و بذلك وصول إلى جمهور أوسع و قراء جدد للمحتوى المطروح في موقعك!
إعداد موجز RSS في موقع Next.js
ملاحظة : الشرح القادم تم تطبيقه على هيكلة App router التي أتت مع إصدار 13 لـ Next.js، في حال أردت شرح لهيكلة src directory فستجدها في الرابط المرفق في قسم المصادر و المراجع.
أولاً، ستحتاج إلى استخدام مكتبة يمكنها إنشاء RSS feeds بناءً على محتوى موقع الويب الخاص بك. إحدى المكتبات الشائعة لإنشاء خلاصات RSS هي مكتبةfeed.
للبدء، ستحتاج أولاً إلى تثبيت مكتبة feed باستخدام npm أو yarn في مشروعك. افتح Terminal أو CMD في مسار الذي يُوجد به مشروعك و نفّذ الأمر التالي :
yarn add feed
ثُم نُنشئ مجلد باسم rss.xml داخل مجلد app و نضيف بداخله ملف باسم route.ts ليصبح كالتالي :
/app/rss.xml/route.ts
ثم نُضيف له الكود التالي :
import { getAllPosts } from "@/libs/posts";
import { Feed } from "feed";
async function rss() {
const posts = await getAllPosts([
'title',
'excerpt',
'date',
'slug',
'draft'
]);
const feed = new Feed({
title: 'مدونة سايفرس',
description: "من نقطة الصفر و لحظة تكوين و نشوء الشيفرة نستلهم كتابتنا للتدوينة حتى نصل إلى أقصى تعقيداتها و تبسيطها للقارئ",
id: process.env.NEXT_PUBLIC_URL as string,
link: process.env.NEXT_PUBLIC_URL,
language: 'ar',
image: `${process.env.NEXT_PUBLIC_URL as string}/icon.png`,
favicon: `${process.env.NEXT_PUBLIC_URL as string}/icon.png`,
author: {
name: "سليمان العثمان",
// email: "john@example.com",
// link: "http://localhost:3000/about",
},
copyright: ""
});
posts.map((post) => {
feed.addItem({
title: post.title as string,
link: `${process.env.NEXT_PUBLIC_URL as string}/posts/${post.slug as string}`,
description: post.excerpt as string,
date: new Date(post.date as string),
});
});
return feed.rss2();
}
export async function GET() {
return new Response(await rss(), {
headers: {
'Content-Type': 'application/xml; charset=utf-8',
},
});
}
شرح الكود
في البداية تم تسمية اسم الملف route.ts من أجل ضبط معالجة الصفحة و جعلها xml بدل html كما سيتبين معنا في شرح الكود.
أستوردنا Feed من مكتبة feed و كذلك دالة getAllPosts.
أنشأنا دالة باسم rss في البداية ثم أستدعينا دالة getAllPosts لجلب التدوينات و حفظناها بمتغير posts.
ثم أنشأنا Feed مع قيّم المطلوبة مثل عنوان المدونة و الوصف و كذلك الرابط ... ألخ
ثم عملنا mapping على posts و في داخلها أضفنا المعلومات التي نريدها لكل تدوينة في feed.
في نهاية دالة rss عملنا return لـ feed بقالب rss نسخة الثانية منه.
ثم أنشأنا دالة GET و هي بالمناسبة تعتبر handler و ذلك لضبط Response الذي يعود للصفحة حين طلبها.
نلاحظ إننا عملنا return لـ new Response و مررنا المحتوى المُنشئ من دالة rss التي أنشأنها سابقًا، و ضبطنا headers من ناحية Content-Type ليكون application/xml، و بتلك الطريقة جعلنا نوع المحتوى للصفحة هو XML.
الآن إذا كان كل شيء على ما يُرام فيمكننا مشاهدة نتيجة من خلال زيارة الرابط التالي :
www.domain.com/rss.xml
و سنجد النتيجة كالتالي :
الخطوة الأخيرة
تبقّت خطوة أخيرة و هي إضافة الموقع مع rss في زر أو أيقونة حيث يمكن للزائر معرفة بأن موقعك يدعم rss.