next-sitemap

The hreflang for Korea and Japan in the description of this post has been changed from 'kr' and 'jp' to 'ko' and 'ja', respectively, as of November 12, 2023

Next-sitemap is a package that easily supports sitemap generation for Next.js projects. It automates sitemap generation and aids in SEO (Search Engine Optimization). This content is a personal compilation based on reference materials.


Installation

Install packages using npm or yarn in the project folder.

Installation

npm install next-sitemap 

Usage

Before direct usage, create a configuration file named next-sitemap.config.js in the root folder.

  • Name
    Register SITE_URL
    Type
    Usage
    Description

    siteUrl: https://example.com is an example. Be sure to register your own URL!

  • Name
    Modify package.json script
    Type
    Usage
    Description

    There may be various scripts like dev, build, start. Create postbuild underneath and input as shown in the example below.

next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

package.json

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.config.js"
}

Customization

The main options available in Next-sitemap are as follows. In addition to essential elements, there are various additional features.

Description

  • Name
    sitemapSize
    Type
    Customization
    Description

    The default value is 5000. Specifies the maximum number of URLs to be included in one sitemap file. This option is useful when you need to split multiple sitemap files for large projects. It is not recommended to exceed 10,000.

  • Name
    exclude(array)
    Type
    Customization
    Description

    Adds URL paths that you want to exclude during sitemap creation in an array format. Example: [/secret-page, 'hidden']

  • Name
    extraPaths(array)
    Type
    Customization
    Description

    Adds URL paths that you want to additionally include in the sitemap in an array format. Example: [/extra-page', '/special']

  • Name
    excludelndex(boolean)
    Type
    Customization
    Description

    The default value is false. When set to true, all index pages will be excluded from the sitemap.

  • Name
    sourceDir(string)
    Type
    Customization
    Description

    The default value is 'next'. Sets the directory where the pages are generated. In most cases, there is no need to change the default value.

  • Name
    outDir(string)
    Type
    Customization
    Description

    The default value is 'public'. Sets the location to save the generated sitemap files. The default value is appropriate for most situations.

  • Name
    robotsTxtOptions(object)
    Type
    Customization
    Description

    Used when the generateRobotsTxt option is true. Allows detailed settings for policy, sitemap, host, etc. inside the object.

next-sitemap.config.js

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: ['/secret', '/private'],
  extraPaths: ['/extra', '/special'],
  excludeIndex: true,
  sourceDir: '.next',
  outDir: 'public',
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/extra-sitemap.xml',
    ],
    policy: [
      { userAgent: '*', disallow: '/private' },
    ],
  }
}

Smooth SEO with next-sitemap.config.js

We have optimized smooth SEO operations and multilingual sites. Additionally, we have created and applied functions to include MDX extensions in the sitemap. Be sure to modify siteUrl with your own domain. Also, alternateRefs code is not necessary if you don't have a multilingual service. Furthermore, if pages are not in MDX format, there is no need to write additionalPaths. Depending on the requirements of your personal project, using optional features appropriately allows for excellent SEO operations. We added robotsTxtOptions for future control. You can use uniform settings instead of detailed segmentation if you want to allow everything.

  • Name
    changefreq
    Type
    Example
    Description

    Set the change frequency of each URL in the sitemap to 'daily'.

  • Name
    priority
    Type
    Example
    Description

    Set the priority of each URL in the sitemap to 0.7.

  • Name
    sitemapSize
    Type
    Example
    Description

    Set the maximum number of URLs included in one sitemap file to 5000.

  • Name
    exclude
    Type
    Example
    Description

    The array specifying URL paths to exclude is empty, so all paths are included.

  • Name
    alternateRefs
    Type
    Example
    Description

    Set alternate links for multilingual sites. There are Korean, English, and Japanese versions on the homepage.

  • Name
    additionalPaths
    Type
    Example
    Description

    Set an asynchronous function to include additional paths. It finds all MDX files from '/pages' and adds them to the sitemap.

next-sitemap.config.js

module.exports = {
  siteUrl: 'http://example.com',
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  exclude: [],
  alternateRefs: [
    {
      href: 'https://example.com/kr',
      hreflang: 'ko',
    },
    {
      href: 'https://example.com/en',
      hreflang: 'en',
    },
    {
      href: 'https://example.com/jp',
      hreflang: 'ja',
    },
  ],
  transform: async (config, path) => {
    return {
      loc: path,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  additionalPaths: async (config) => {
  const allMdxFiles = findAllMdxFiles('./pages')
    return allMdxFiles.map((file) => ({
      loc: `${config.siteUrl}/${file}`,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }))
  },
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '\*',
        allow: '/',
      },
      {
        userAgent: 'Googlebot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Bingbot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yeti',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoo! Slurp',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoobot', // Japan Yahoo
        allow: '/',
        disallow: [],
      },
    ],
    additionalSitemaps: ['https://example/sitemap-0.xml'],
  },
}