
With my new site being built with Next.js, I needed to figure out a way to still provide RSS feeds and a sitemap using the MDX files as a source.
I use [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote) from Hashicorp for the parsing and rendering of my MDX files and with the latest major version, v3, it got to be a little tricky so hopefully you'll find this helpful!

## RSS Feed

To generate an RSS feed for my Next.js site, I used the aptly named [`feed`](https://www.npmjs.com/package/feed) package and installed it as a dev dependency.

### Installation
```bash
# Using yarn
yarn add feed -D
# or using NPM
npm install feed --save-dev
```

### Implementation

I then created a file named `feeds.tsx` in my `utils` directory. And we'll start off with this:

```tsx title=utils/feed.tsx
import fs from 'fs';

import { Feed } from 'feed';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';
import { renderToStaticMarkup } from 'react-dom/server';

import { MDXComponents } from '@components/MDX';
import { getPosts } from '@utils/mdx';

const generateFeeds = async () => {

}
```

From there, I start with some basic data like the date, my name and author information, as well as the site url and I also fetch the posts which are just local MDX files in the `data` directory.

```tsx title=utils/feed.tsx
// ...

const generateFeeds = async () => {
  const domain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || process.env.VERCEL_URL;
  const posts = await getPosts();
  const siteURL = `https://${domain}`;
  const date = new Date();
  const author = {
    name: 'Kevin Langley Jr.',
    email: 'me@kevinlangleyjr.com',
    link: 'https://kevinlangleyjr.dev',
  };
}

// ...
```

Then I created a new Feed object.

```tsx title=utils/feed.tsx
// ...

const feed = new Feed( {
  title: 'Kevin Langley | Web Engineer',
  description: '',
  id: siteURL,
  link: siteURL,
  image: `${siteURL}/kevinlangleyjr.jpg`,
  copyright: `All rights reserved ${date.getFullYear()}, Kevin Langley Jr.`,
  updated: date,
  generator: 'Next.js',
  feedLinks: {
    rss2: `${siteURL}/rss/feed.xml`,
    json: `${siteURL}/rss/feed.json`,
    atom: `${siteURL}/rss/atom.xml`,
  },
  author,
} );

// ...
```

Then we can finally start looping over our posts to add to the feed.
With the latest changes to the `next-mdx-remote` package and no longer having the `renderToString` method in v3,
we are using `renderToStaticMarkup` from `react-dom/server` to generate the markup to add to our feeds.

```tsx title=utils/feed.tsx
// ...

  for ( const post of posts ) {
    const url = `${siteURL}/blog/${post.slug}`;
    const { content, ...postData } = post;

    const mdxSource = await serialize( content, {
      scope: postData as Record<string, any>, // Scope expects a <Record> here.
      mdxOptions: {
        remarkPlugins: [
          // I use a few different remark plugins, check out my "How I built my blog" article for more information!
        ],
      },
    } );

    const markup = renderToStaticMarkup(
      <MDXRemote components={ MDXComponents } { ...mdxSource } />
    );

    feed.addItem(
      {
        title: post.title,
        guid: post.slug,
        id: url,
        link: url,
        description: post.excerpt,
        content: markup,
        author: [ author ],
        contributor: [ author ],
        date: new Date( post.published_date ),
      }
    );

  }

// ...
```

And then we can finally write those feeds to their appropriate files.

```tsx title=utils/feed.tsx
// ...

fs.mkdirSync( './public/rss', { recursive: true } );
fs.writeFileSync( './public/rss/feed.xml', feed.rss2() );
fs.writeFileSync( './public/rss/atom.xml', feed.atom1() );
fs.writeFileSync( './public/rss/feed.json', feed.json1() );

// ...
```

Now, how do we get these feeds to automatically run on build?

Easy! Just call it in the `getStaticProps` method in the blog index and it will generate on build.
I like to wrap it in a check for the `VERCEL` environment variable which will then only run when building on the Vercel platform, or if I pass in the environment variable when building locally.

```tsx title=pages/blog/index.ts
// ...

export const getStaticProps: GetStaticProps = async () => {
  const { posts, hasNextPage } = getPostsForPage();

  if ( process.env?.VERCEL ) {
    await generateFeeds();
  }

  return {
    props: {
      posts,
      hasNextPage,
    },
  };
};

// ...
```

Here is the entire `feed.tsx` file with all the steps completed.

```tsx title=utils/feed.tsx
import fs from 'fs';

import { Feed } from 'feed';
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';
import { renderToStaticMarkup } from 'react-dom/server';

import { MDXComponents } from '@components/MDX';
import { getPosts } from '@utils/mdx';

const generateFeeds = async () => {
  const domain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || process.env.VERCEL_URL;
  const posts = await getPosts();
  const siteURL = `https://${domain}`;
  const date = new Date();
  const author = {
    name: 'Kevin Langley Jr.',
    email: 'me@kevinlangleyjr.com',
    link: 'https://kevinlangleyjr.dev',
  };


  const feed = new Feed( {
    title: 'Kevin Langley | Web Engineer',
    description: '',
    id: siteURL,
    link: siteURL,
    image: `${siteURL}/kevinlangleyjr.jpg`,
    copyright: `All rights reserved ${date.getFullYear()}, Kevin Langley Jr.`,
    updated: date,
    generator: 'Next.js',
    feedLinks: {
      rss2: `${siteURL}/rss/feed.xml`,
      json: `${siteURL}/rss/feed.json`,
      atom: `${siteURL}/rss/atom.xml`,
    },
    author,
  } );

  for ( const post of posts ) {
    const url = `${siteURL}/blog/${post.slug}`;
    const { content, ...postData } = post;

    const mdxSource = await serialize( content, {
      scope: postData as Record<string, any>, // Scope expects a <Record> here.
      mdxOptions: {
        remarkPlugins: [
          // I use a few different remark plugins, check out my "How I built my blog" article for more information!
        ],
      },
    } );

    const markup = renderToStaticMarkup(
      <MDXRemote components={ MDXComponents } { ...mdxSource } />
    );

    feed.addItem(
      {
        title: post.title,
        guid: post.slug,
        id: url,
        link: url,
        description: post.excerpt,
        content: markup,
        author: [author],
        contributor: [author],
        date: new Date(post.published_date),
      }
    );

  }

  fs.mkdirSync( './public/rss', { recursive: true } );
  fs.writeFileSync( './public/rss/feed.xml', feed.rss2() );
  fs.writeFileSync( './public/rss/atom.xml', feed.atom1() );
  fs.writeFileSync( './public/rss/feed.json', feed.json1() );
}
```

## Sitemap

For the sitemap functionality, I chose to use `next-sitemap` which provides a simple API to create a sitemap from your static, dynamic, and server side pages in Next.js.

I'm only using static pages on my site, but you can check out the [README](https://github.com/iamvishnusankar/next-sitemap#generating-dynamicserver-side-sitemaps) if you're interested in generating dynamic or server-side sitemaps.

### Installation

```bash
# Using yarn
yarn add next-sitemap -D
# or using NPM
npm install -D next-sitemap
```

### Implementation
From there, I created a new file in the root of the project named, `next-sitemap.js` and I provided a basic configuration within.
You can find the different configuration options supported in the [README](https://github.com/iamvishnusankar/next-sitemap#configuration-options)

```tsx title=next-sitemap.js
module.exports = {
  siteUrl: `https://${ process.env.VERCEL_URL }`,
  generateRobotsTxt: true,
};
```

And then in my `package.json`, I added `next-sitemap` to the `postbuild` script.

```tsx title=package.json
{
  "build": "next build",
  "postbuild": "next-sitemap"
}
```

From there, whenever you build your project you'll have a `sitemap.xml` and if you set `generateRobotsTxt` to `true` in the configuration, a `robots.txt` generated into your `public` directory.

Profit! 🎉🎉🎉


With my new site being built with Next.js, I needed to figure out a way to still provide RSS feeds and a sitemap using the MDX files as a source. I use next-mdx-remote from Hashicorp for the parsing and rendering of my MDX files and with the latest major version, v3, it got to be a little tricky so hopefully you'll find this helpful!

Generating an RSS Feed and Sitemap in Next.js

Today in 2018, JavaScript is the most popular language to use on the web, according to the StackOverflow 2018 developer survey. But the JavaScript we know and love today, is not the same JavaScript from the 2000's or even the early 2010's. Let's dive in!

Modern JS with ES6+


Arrow functions are a more concise alternative to the traditional function expression but they aren't appropriate everywhere.

Let's check out some examples of times you would *not* want to use arrow functions.

#### Scenario 1. Callback functions that require dynamic context.

Callback functions that require dynamic context, such as the element clicked, are not good candidates for arrow functions because you are unable to change the pre-defined context of `this`.

```js
const button = document.querySelectorAll( '.cta-button' );
button.addEventListener( 'click', () => {
  this.classList.toggle( 'selected' ); // `this`refers to the Window. ☹️
} );
```

Using a regular function allows the value of `this` to change based on the context of the target element.

```js
const button = document.querySelectorAll( '.cta-button' );
button.addEventListener( 'click', function() {
  this.classList.toggle( 'selected' ); // `this`refers to the button! 🎉🎉🎉
} );
```

#### Scenario 2. Functions that use the `arguments` object.

Arrow functions do not bind the global `arguments` object.
```js
const logUser = () => {
  console.log(arguments[0]); // Uncaught ReferenceError: arguments is not defined 😕
}

logUser( 'Kevin' );
```

But with a regular function, you have access to the global `arguments` object.

```js
function logUser() {
  console.log(arguments[0]); // Kevin

  console.log(arguments[1]); // Langley
}

logUser( 'Kevin', 'Langley' );
```

#### Scenario 3. Prototype Methods

```js
function User(firstName, lastName) {
  this.name = `${firstName} ${lastName}`;
}

User.prototype.sayHello = () => {
  return `Hello, ${this.name}`;
}

const me = new User( 'Kevin', 'Langley' );
me.sayHello(); // Hello,
```

The `this` value in the `sayHello` method references the global object and not the `User` object that it is trying to access.

Instead, write your prototype methods the old fashioned way.

```js
function User(firstName, lastName) {
  this.name = `${firstName} ${lastName}`;
}

User.prototype.sayHello = function() {
  return `Hello, ${this.name}`;
}

const me = new User( 'Kevin', 'Langley' );
me.sayHello(); // Hello, Kevin Langley
```

#### Scenario 4. Object methods

```js
const user = {
  name: 'Kevin Langley',
  sayHello: () => `Hello, ${this.name}`;
}

user.sayHello(); // Hello,
```

The `this` value in the `sayHello` method references the global object and not the `User` object that it is trying to access.

Instead, write your prototype methods the old fashioned way.

```js
const user = {
  name: 'Kevin Langley',
  sayHello() {
    return `Hello, ${this.name}`;
  }
}

user.sayHello(); // Hello, Kevin Langley
```


Arrow functions are a more concise alternative to the traditional function expression but they aren't appropriate everywhere. Let's check out some examples of times you would not want to use arrow functions.

Blog

Generating an RSS Feed and Sitemap in Next.js

Modern JS with ES6+

When to not use arrow functions in JavaScript