Sitemaps & RSS Feeds with Next.js App Router

Generating Sitemaps with Next.js App Router

Before the introduction of the App Router in Next.js, creating sitemaps was a little hacky, but now it’s easier and more elegant with the new API.

Step 1: Create sitemap.js file inside app directory

Create a sitemap.js file (or sitemap.ts if using TypeScript) inside your project’s app directory. Export a default async function named Sitemap that will return an array containing the website’s pages.

export default async function Sitemap() {
  return [
    {
      url: "https://yourdomain.com",
      lastModified: new Date(),
    },
  ];
}

This is a basic setup of the sitemap, with the homepage URL and a lastModified property for the last modified date (which is set to the current date in this example).

Now, when you visit http://localhost:3000/sitemap.xml, you should see your sitemap containing the homepage URL.

Step 2: Add dynamic pages to the sitemap

To add your website’s posts to the sitemap, you can import a function (e.g., getAllPosts()) that fetches the necessary post data.

import { getAllPosts } from "../path/to/your/function";

export default async function Sitemap() {
  // ...previous code
  const allPosts = await getAllPosts();
  // ...remaining code
}

Then, use the map() function to go through all the posts and format them correctly for the sitemap:

const posts = allPosts.map((post) => ({
  url: `https://yourdomain.com/${post.uri}`,
  lastModified: post.modified,
}));

Lastly, spread the posts array to include them in the sitemap:

return [
  {
    url: "https://yourdomain.com",
    lastModified: new Date(),
  },
  ...posts,
];

Now, your sitemap should include all the posts dynamically fetched from your website!

Generating RSS Feeds with Static Route Handlers

Unlike sitemaps, there isn’t a first-class support for generating RSS feeds with Next.js, but you can use Static Route Handlers for this purpose.

Step 1: Install the rss package

While we could create an XML template by hand, its much easier to use a package that can help use. We can use RSS to help us easily set this up.

Install the rss package via npm:

npm install rss

Step 2: Create feed.xml directory inside app directory

Create a new directory called feed.xml inside your app directory, then create a route.js file (or route.ts if using TypeScript) inside the new folder.

Inside route.js, export an async function named GET for fetching data and returning the XML content with the appropriate headers.

import RSS from "rss";

export async function Get() {
  return new Response('', {
    headers: {
      'Content-Type': 'application/atom+xml; charset=utf-8',
    },
  });
}

Step 4: Create an RSS feed instance and add post items

Create an instance of the RSS library and set its properties with your website’s data.

To generate feed items for the individual posts, use the feed.item() method in a forEach() loop to add each post similar to how we did with the Sitemap above.

const feed = new RSS({
  title: '',
  description: '',
  site_url: '',
  feed_url: '',
  copyright: '',
  language: '',
  pubDate: '',
});

posts.map((post) => {
  feed.item({
    title: post.title,
    guid: `${host}${post.uri}`,
    url: `${host}${post.uri}`,
    date: post.date,
    description: post.excerpt,
    author: post.author.name,
    categories: post.categories.map(({ name }) => name) || [],
  });
});

Step 5: Return the XML generated by the rss package

In the response, return the XML generated by the rss package using the feed.xml() method.

return new Response(feed.xml({ indent: true }), {
  headers: {
    'Content-Type': 'application/atom+xml; charset=utf-8',
  },
});

After implementing these steps, visit http://localhost:3000/feed.xml, and you should see the generated RSS feed containing the homepage and all your posts.

Validating Your RSS Feed

You can validate your RSS feed using the W3C Feed Validation Service. Just copy the feed’s XML source code and paste it into the “Direct Input” tab of the validator, or when deployed enter your URL.

Next.js App Router

The Next.js App Router provides powerful and flexible tools for generating assets like sitemaps and RSS feeds that ensure your website is properly indexed and allows users to stay up-to-date with your latest content.