Prismic Sitemap Generator


An easy to configure sitemap generator for Next.js websites based on the pages in your Prismic.io CMS.

About

This package uses the Sitemap.js package to generate the sitemaps as it handles all the needed stuff for sitemaps. This also gives the end user flexibility in generating the sitemap.

It aims to simplify the configuration required to create the sitemap, and also include it in the build process of your Next.js site by extending the next.config.js file.

> This package is also inspired by the live steam from Prismic.io where they built a sitemap generator. But wanting to make it better like.

Installation

You can use either npm or yarn to install the package:

$3

``bash
npm install --save-dev @reecem/prismic-sitemap
`

$3

`bash
yarn add -D @reecem/prismic-sitemap
`

Usage

The package is configured and used inside the next.config.js file.

It works in a similar way to most Next.js plugins, it will also call the top-level webpack() function in the next.config.js file.

$3

A basic Next.js file that has the sitemap generator plugin running would like as follows:

`javascript

// The Prismic API endpoint
const API_ENDPOINT = https://${process.env.REPOSITORY_NAME}.cdn.prismic.io/api/v2;

// The hostname of the website, for example it would be https://example.com
const SITE_URL = process.env.VERCEL_ENV;

// this is the link resolver for the documents that are fetched.
const linkResolver = doc => {

if (doc.type == 'post') {
return blog/${doc.uid};
}

return ${doc.uid};
};

const withPrismicSitemap = require('@reecem/prismic-sitemap')({
linkResolver: linkResolver,
apiEndpoint: API_ENDPOINT,
hostname: SITE_URL,
optionsMapPerDocumentType: {
// setting the update date of the article.
post: (document) => {
return {
// get the last time the document was published in Prismic
lastmod: document.last_publication_date,
changefreq: "weekly",
priority: 0.8
}
}
page: { changefreq: "monthly", priority: 1 }
},
documentTypes: ['page', 'post']
});

module.exports = withPrismicSitemap({
... other nextConfig things here... or before :)
})
`

$3

A more complex example would be to have multiple page types and also multi-language support inside the sitemap.

This one will use a linkResolver that picks if it should use the default local pattern or the localized version and sets that as a prefix.

`javascript
// The Prismic API endpoint
const API_ENDPOINT = https://${process.env.REPOSITORY_NAME}.cdn.prismic.io/api/v2;

// The hostname of the website, for example it would be https://example.com
const SITE_URL = process.env.VERCEL_ENV;

const linkResolver = doc => {
const prefix = doc.lang !== "en-za" ? /${doc.lang} : "";

switch (doc.type) {
case "homepage":
case "pricing":
case "page":
return ${prefix}/${doc.uid ? doc.uid : ''};

case "post":
return ${prefix}/blog/${doc.uid};

case "legal":
return ${prefix}/legal/${doc.uid};

case "product":
return ${prefix}/product/${doc.uid};

default:
throw new Error(Unknown doc.type: "${doc.type}");
}
};

const withPrismicSitemap = require('@reecem/prismic-sitemap')({
linkResolver: linkResolver,
apiEndpoint: API_ENDPOINT,
hostname: SITE_URL,
optionsMapPerDocumentType: {
page: { changefreq: "monthly", priority: 1 },
// homepage: { changefreq: "monthly", priority: 1 }, Homepage would default to this as it isn't found
// legal: { changefreq: "monthly", priority: 1 }, Legal types would default to this as it isn't found
post: { changefreq: "weekly", priority: 0.8 },
pricing: { changefreq: "monthly", priority: 1 }
},
documentTypes: ['homepage', 'page', 'pricing', 'legal']
})

module.exports = withPrismicSitemap({
... other nextConfig things here... or before :)
})
`

$3

If you are using a closed or private prismic repository, you may need to use the API token to get published documents. From version 0.2.0 you can add the token.

Below is an example, you need to add the sitemap.accessToken to the config.

`javascript

// The Prismic API endpoint
const API_ENDPOINT = https://${process.env.REPOSITORY_NAME}.cdn.prismic.io/api/v2;

// The hostname of the website, for example it would be https://example.com
const SITE_URL = process.env.VERCEL_ENV;

// this is the link resolver for the documents that are fetched.
const linkResolver = doc => {

if (doc.type == 'post') {
return blog/${doc.uid};
}

return ${doc.uid};
};

const withPrismicSitemap = require('@reecem/prismic-sitemap')(sitemap: {
linkResolver: linkResolver,
apiEndpoint: API_ENDPOINT,
accessToken: process.env.PRISMIC_ACCESS_TOKEN,
hostname: SITE_URL,
optionsMapPerDocumentType: {
post: { changefreq: "weekly", priority: 0.8 },
page: { changefreq: "monthly", priority: 1 }
},
documentTypes: ['page', 'post']
})

module.exports = withPrismicSitemap({
... other nextConfig things here..
})
`

$3

The package makes use of lastmod support for the sitemap, this would need to be set by the user if you would want the date to come through at the current version of 0.3.0.

Because the Sitemap file is written using a separate package, it supports parsing the date straight to the YYYY-MM-DD format, if you would like it to have the time as well, you will need to override the setting in the config:

`javascript
sitemap: {

sitemapConfig: {
lastmodDateOnly: false,
},

}
`

API

The sitemap object is made up of the following:

`javascript

{
sitemap: {
linkResolver = Function,
apiEndpoint = String,
accessToken = String|null,
hostname = String,
fileName = String,
optionsMapPerDocumentType = Object|Object,
defaultEntryOption = Object,
staticPaths = Array