@sergeymyssak/nextjs-sitemap

Next.js sitemap generator

Generate dynamic sitemap.xml for Next.js projects!
Checkout the examples folder for source code.

Installation

Open a Terminal in the project root and run:

npm install @sergeymyssak/nextjs-sitemap

or

yarn add @sergeymyssak/nextjs-sitemap

Usage

Sample generated sitemap

Checkout the Google sitemap example.

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 
    http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>https://example.com/en/about</loc>
        <lastmod>2020-06-28</lastmod>
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about" />
        <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about" />
        <xhtml:link rel="alternate" hreflang="ru" href="https://example.com/ru/about" />
    </url>
    <url>
        <loc>https://example.com/es/about</loc>
        <lastmod>2020-06-28</lastmod>
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about" />
        <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about" />
        <xhtml:link rel="alternate" hreflang="ru" href="https://example.com/ru/about" />
    </url>
    <url>
        <loc>https://example.com/ru/about</loc>
        <lastmod>2020-06-28</lastmod>
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about" />
        <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about" />
        <xhtml:link rel="alternate" hreflang="ru" href="https://example.com/ru/about" />
    </url>
</urlset>

Setup a sitemap

All static routes (eg. /pages/about.*) are automatically add to the sitemap.

const sitemap = new Sitemap({
  baseUrl: 'https://example.com',
  pagesConfig: {
    '/about': {
      priority: '0.5',
      changefreq: 'daily',
    },
  },
  targetDirectory: __dirname + '/public',
  pagesDirectory: __dirname + '/src/pages',
});
sitemap.generateSitemap();

For dynamic routes (eg. /pages/project/[id].*), you have to declare them with the include property.

async function getDynamicPaths() {
  const data = ['house', 'flower', 'table'];
  return data.map((item) => `/project/${item}`);
}

getDynamicPaths().then((paths) => {
  const sitemap = new Sitemap({
    baseUrl: 'https://example.com',
    include: paths,
    exclude: ['/project/[id]'],
    targetDirectory: __dirname + '/public',
    pagesDirectory: __dirname + '/src/pages',
  });
  sitemap.generateSitemap();
});

You can exclude any path with the exclude property.

const sitemap = new Sitemap({
  baseUrl: 'https://example.com',
  exclude: ['/about'],
  targetDirectory: __dirname + '/public',
  pagesDirectory: __dirname + '/src/pages',
});
sitemap.generateSitemap();

Sitemap options

baseUrl (required): string

The url that it's going to be used at the beginning of each page.

exclude (optional): string[]

The exclude parameter is an array of glob patterns to exclude static routes from the generated sitemap.

excludeExtensions (optional): string[]

Ignore files by extension.

Example:

const sitemap = new Sitemap({
  // ...
  excludeExtensions: ['.ts'],
  // ...
});
sitemap.generateSitemap();

excludeIndex (optional): boolean

Remove index from URL, directory will be ending with the slash. Defaults to true.

include (optional): string[]

Array of extra paths to include in the sitemap. If you want to add any route with dynamic parameters, you have to set an array of dynamic routes.

Example:

const sitemap = new Sitemap({
  // ...
  include: ['/project/1', '/project/2'],
  exclude: ['/project/[id]'],
  // ...
});
sitemap.generateSitemap();

isSubdomain (optional): boolean

Localization based on the subdomain - https://en.example.com. Defaults to false.

langs (optional): string[]

Array of languages. Localization based on the subdirectory - https://example.com/en.

nextConfigPath (optional): string

Use exportPathMap from next.config.js file.

pagesConfig (optional): { [key: string]: { priority: string, changefreq: string } }

Object configuration of priority and changefreq per route.

Example:

const sitemap = new Sitemap({
  // ...
  pagesConfig: {
    '/about': {
      priority: '0.5',
      changefreq: 'daily',
    },
    '/works': {
      priority: '0.9',
      changefreq: 'daily',
    },
  },
  // ...
});
sitemap.generateSitemap();

pagesDirectory (required): string

The directory where there are Next.js pages.

sitemapStylesheet (optional): { type: string; styleFile: string; }[]

Array of style objects that will be applied to sitemap.

Example:

const sitemap = new Sitemap({
  // ...
  sitemapStylesheet: [
    {
      type: "text/css",
      styleFile: "styles/styles.css"
    },
    {
      type: "text/xsl",
      styleFile: "styles/styles.xls"
    }
  ],
  // ...
});
sitemap.generateSitemap();

Useful information

• Google sitemap example
• The value of the hreflang attribute identifies the language (in ISO 639-1 format) and optionally a region (in ISO 3166-1 Alpha 2 format) of an alternate URL.