How to add RSS and JSON Feeds to Next.js portfolio for better SEO and reach

Having an amazing portfolio is great - but what if people never find your content?

That’s where feeds come in. By integrating RSS and JSON feeds into your Next.js portfolio, you make it easier for readers, apps, and search engines to discover and distribute your content.

Let’s simplify this a bit - it’s like giving your blogs their own megaphone.

In this post, I’ll walk you through how I integrated RSS and JSON feeds into my own portfolio site built with Next.js.

---

📌 Why Add RSS & JSON Feeds?

• RSS (Really Simple Syndication) lets users and services subscribe to your blog updates.
• JSON Feed is a modern alternative using JSON format (easier to parse and more web-dev friendly).

These are especially useful for:

• SEO boost
• Subscribing via feed readers
• Syndicating content to platforms like Flipboard, Feedly, or even Twitter/X bots

---

🛠️ Step-by-Step Integration

1️⃣ Install Required Packages

npm install rss
npm install jsonfeed
npm install feed
npm install --save-dev ts-node typescript

These packages help you create both types of feeds programmatically.

---

2️⃣ Create lib/generateFeed.ts

This file generates the feed based on your blog posts. Here's a simplified snippet:

import fs from "fs";
import path from "path";
import { Feed } from "feed";
import { getAllBlogs } from "./getAllBlogs";
import type { Blog } from "../types/blog";

export async function generateFeeds() {
  const siteURL = "Your site url";

  const author = {
    name: "Saket Singh",
    email: "codingwithsaket@gmail.com",
    link: siteURL,
  };

  const feed = new Feed({
    title: "Code with Saket - Blog Feed",
    description: "Latest posts from Code with Saket",
    id: siteURL,
    link: siteURL,
    language: "en",
    favicon: `${siteURL}/favicon.ico`,
    copyright: `All rights reserved ${new Date().getFullYear()}, Saket`,
    updated: new Date(),
    generator: "Next.js Feed Generator",
    feedLinks: {
      json: `${siteURL}/feed.json`,
      rss: `${siteURL}/rss.xml`,
    },
    author,
  });

  const blogs: Blog[] = getAllBlogs();

  blogs.forEach((post) => {
    const url = `${siteURL}/blogs/${post.slug}`;

    feed.addItem({
      title: post.title,
      id: url,
      link: url,
      description: post.description,
      date: new Date(post.date ?? Date.now()),
      author: [author],
    });
  });

  fs.writeFileSync(path.join(process.cwd(), "public", "rss.xml"), feed.rss2());
  fs.writeFileSync(path.join(process.cwd(), "public", "feed.json"), feed.json1());
}

⚠️ Make sure your posts array is dynamically generated from markdown or CMS content.

---

3️⃣ Add scripts/postbuild.ts and postbuild.js

This script runs after the production build and generates the feeds: scripts/postbuild.ts

import { generateFeeds } from "../lib/generateFeed";

(async () => {
  await generateFeeds();
})();

Then transpile it to JS: scripts/postbuild.js

require("ts-node").register({
  transpileOnly: true,
  compilerOptions: {
    module: "commonjs",
    moduleResolution: "node",
  },
});

require("./postbuild.ts");

---

4️⃣ Add Rewrites to next.config.js

So that /rss and /feed nicely redirect to their respective files:

async rewrites() {
  return [
    {
      source: '/rss',
      destination: '/rss.xml',
      permanent: true,
    },
    {
      source: '/feed',
      destination: '/feed.json',
      permanent: true,
    },
  ];
},

---

5️⃣ Add Postbuild Script in package.json

"scripts": {
  "postbuild": "node scripts/postbuild.js"
},

This will run right after the Next.js build and create fresh feed files every time.

---

✅ How to Check & Verify

A. On Local Development

1. Run a full build:

   npm run build
   npm run postbuild
   npm run dev or npm start
   

2. Visit:
   • 🌐 http://localhost:3000/rss → Should redirect to /rss.xml
   • 🌐 http://localhost:3000/feed → Should redirect to /feed.json
3. 📁 Also check if the files exist under public/rss.xml and public/feed.json.

---

B. On Vercel Deployment

1. 📤 Push your code to GitHub or your Vercel-connected repo.
2. 🛠️ Trigger a new build.
3. ✅ Once deployed, test the following:
   • https://your-domain.com/rss
   • https://your-domain.com/feed
4. You should see:
   • 🧾 XML feed
   • 📄 JSON feed

Vercel will automatically execute the postbuild script and publish the generated feed files.

---

💡 Final Thoughts

Adding RSS and JSON feeds might sound like a small addition, but it can significantly amplify your blog’s visibility and accessibility. If you're a developer building a personal brand or portfolio, it’s these little integrations that set your site apart.

Thanks for reading - feel free to connect with me or add your valuable feedback. 🙌

Stay awesome 👨‍💻✨