"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["I recently decided to add an ", _jsx("a", { href: "https://story.vjy.me/feed", children: " RSS feed" }), " to my blog. Like any developer, my first instinct was to Google \"how to add RSS feed to Next.js blog\" 😄"] }), "\n", _jsxs(_components.p, { children: ["During my research, I found that many tutorials suggested using the ", _jsx(_components.code, { children: "rss" }), " npm package. One particular tutorial by ", _jsx("a", { href: "https://www.davegray.codes/posts/nextjs-how-to-build-an-rss-feed", children: " Dave Gray" }), " caught my attention. It seemed straightforward enough, so I decided to give it a try."] }), "\n", _jsx(_components.p, { children: "However, things didn't go quite as planned. Despite following the tutorial, I ran into some issues getting it to work with my Next.js App Router setup. That's when I remembered that I had already implemented a sitemap for my blog using Next.js's built-in features without any external packages. After some experimentation with route handlers and XML generation, I managed to get it working!" }), "\n", _jsx(_components.p, { children: "Here's how I implemented it using Next.js App Router's route handlers, no external packages needed." }), "\n", _jsx(_components.h2, { children: "Basic Structure" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// app/feed/route.ts\nexport async function GET() {\n const blogs: Blogs = await getMetadata()\n // Generate and return RSS XML\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["This creates a route handler at ", _jsx(_components.code, { children: "/feed" }), " that responds to GET requests. We use ", _jsx(_components.code, { children: "getMetadata()" }), " to fetch all blog posts."] }), "\n", _jsx(_components.h2, { children: "XML Generation" }), "\n", _jsx(_components.h3, { children: "1. XML Header and Channel Info" }), "\n", _jsx(_components.pre, { className: "language-xml", children: _jsxs(_components.code, { className: "language-xml", children: [_jsx(_components.span, { className: "token prolog", children: "" }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "rss"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "version" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "2.0", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsxs(_components.span, { className: "token attr-name", children: [_jsx(_components.span, { className: "token namespace", children: "xmlns:" }), "atom"] }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "http://www.w3.org/2005/Atom", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "channel"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "realvjy's story", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "https://story.vjy.me", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "description"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Some thoughts, stories and insights", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "language"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "en", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "lastBuildDate"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${new Date().toUTCString()}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Defines XML version and encoding" }), "\n", _jsx(_components.li, { children: "Specifies RSS version 2.0" }), "\n", _jsx(_components.li, { children: "Includes atom namespace for enhanced compatibility" }), "\n", _jsx(_components.li, { children: "Sets channel metadata (title, link, description)" }), "\n", _jsxs(_components.li, { children: ["Uses ", _jsx(_components.code, { children: "toUTCString()" }), " for standard date format"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "2. Blog Posts Processing" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "Object.entries(blogs)\n .sort(([, a], [, b]) => \n new Date(b.created_at).getTime() - new Date(a.created_at).getTime()\n )\n .map(([id, blog]) => {\n const url = `https://story.vjy.me/${id}`;\n // Generate item XML\n })\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Converts blog object to array of entries" }), "\n", _jsx(_components.li, { children: "Sorts posts by date (newest first)" }), "\n", _jsx(_components.li, { children: "Maps each blog post to RSS item format" }), "\n"] }), "\n", _jsx(_components.h3, { children: "3. Individual Post Items" }), "\n", _jsx(_components.pre, { className: "language-xml", children: _jsxs(_components.code, { className: "language-xml", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "item"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token cdata", children: "" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${url}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "guid"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${id}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "description"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token cdata", children: "" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "pubDate"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${new Date(blog.created_at).toUTCString()}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "author"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${blog.author_id}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "category"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "${blog.category}", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "CDATA" }), " sections protect against special characters in title and description"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "guid" }), " uses post ID for unique identification"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "pubDate" }), " converts blog date to UTC format"] }), "\n", _jsx(_components.li, { children: "Includes author and category information" }), "\n"] }), "\n", _jsx(_components.h3, { children: "4. Response Headers" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "return new Response(xml, {\n headers: {\n 'Content-Type': 'application/xml; charset=utf-8',\n 'Cache-Control': 'public, max-age=3600'\n }\n})\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Sets proper XML content type" }), "\n", _jsx(_components.li, { children: "Enables caching for one hour" }), "\n", _jsx(_components.li, { children: "Returns RSS feed as HTTP response" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Usage Example" }), "\n", _jsxs(_components.p, { children: ["When a reader visits ", _jsx("a", { href: "https://story.vjy.me/feed", children: "/feed" }), ", they'll receive an RSS feed like this:"] }), "\n", _jsx(_components.pre, { className: "language-xml", children: _jsxs(_components.code, { className: "language-xml", children: [_jsx(_components.span, { className: "token prolog", children: "" }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "rss"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "version" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "2.0", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsxs(_components.span, { className: "token attr-name", children: [_jsx(_components.span, { className: "token namespace", children: "xmlns:" }), "atom"] }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "http://www.w3.org/2005/Atom", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "channel"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "realvjy's story", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "https://story.vjy.me", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "description"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Some thoughts, stories and insights", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "item"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsx(_components.span, { className: "token cdata", children: "" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "https://story.vjy.me/28", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "guid"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "isPermaLink" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "false", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "28", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "description"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsx(_components.span, { className: "token cdata", children: "" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "pubDate"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Fri, 13 Dec 2024 18:30:00 GMT", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "author"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "realvjy", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "category"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Devlog", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token comment", children: "" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }), "\n", _jsxs(_components.p, { children: ["This implementation provides a standard-compliant RSS feed that works with all major RSS readers while being efficient and maintainable. Check complete code ", _jsx("a", { href: "https://gist.github.com/realvjy/625a647a1fdf259c59e4388c5089af0d", children: "gist here " })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Adding RSS Feed to Next.js blog

Dec 14, 2024 · 2 min read

stay hungry, stay foolish

-Steve Jobs