Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

License

NotificationsYou must be signed in to change notification settings

iamvishnusankar/next-sitemap

Repository files navigation

BANNER

Build Statusnpm versionPRs Welcomefollow on Twitter

Table of contents

Getting started

Installation

yarn add next-sitemap

Create config file

next-sitemap requires a basic config file (next-sitemap.config.js) under your project root

next-sitemap will load environment variables from.env files by default.

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

Building sitemaps

Add next-sitemap as your postbuild script

{"build":"next build","postbuild":"next-sitemap"}

Custom config file

You can also use a custom config file instead ofnext-sitemap.config.js. Just pass--config <your-config-file>.js to build command (Example:custom-config-file)

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

Building sitemaps with pnpm

When using pnpm you need to create a.npmrc file in the root of your project if you want to use a postbuild step:

//.npmrcenable-pre-post-scripts=true

Index sitemaps (Optional)

📣 Fromnext-sitemap v2.x onwards,sitemap.xml will beIndex Sitemap. It will contain urls of all other generated sitemap endpoints.

Index sitemap generation can be turned off by settinggenerateIndexSitemap: false in next-sitemap config file. (This is useful for small/hobby sites which does not require an index sitemap) (Example:no-index-sitemaps)

Splitting large sitemap into multiple files

Define thesitemapSize property innext-sitemap.config.js to split large sitemap into multiple files.

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

Above is the minimal configuration to split a large sitemap. When the number of URLs in a sitemap is more than 7000,next-sitemap will create sitemap (e.g. sitemap-0.xml, sitemap-1.xml) and index (e.g. sitemap.xml) files.

Configuration Options

propertydescriptiontype
siteUrlBase url of your websitestring
output (optional)Next.js output modes.Check documentation.standalone,export
changefreq (optional)Change frequency. Defaultdailystring
priority (optional)Priority. Default0.7number
sitemapBaseFileName (optional)The name of the generated sitemap file before the file extension. Default"sitemap"string
alternateRefs (optional)Denote multi-language support by unique URL. Default[]AlternateRef[]
sitemapSize(optional)Split large sitemap into multiple files by specifying sitemap size. Default5000number
autoLastmod (optional)Add<lastmod/> property. Defaulttruetrue
exclude (optional)Array ofrelative paths (wildcard pattern supported) to exclude from listing onsitemap.xml orsitemap-*.xml. e.g.:['/page-0', '/page-*', '/private/*'].

Apart from this optionnext-sitemap also offers a customtransform option which could be used to exclude urls that match specific patterns
string[]
sourceDir (optional)next.js build directory. Default.nextstring
outDir (optional)All the generated files will be exported to this directory. Defaultpublicstring
transform (optional)A transformation function, which runsfor eachrelative-path in the sitemap. Returningnull value from the transformation function will result in the exclusion of that specificpath from the generated sitemap list.async function
additionalPaths (optional)Async function that returns a list of additional paths to be added to the generated sitemap list.async function
generateIndexSitemapGenerate index sitemaps. Defaulttrueboolean
generateRobotsTxt (optional)Generate arobots.txt file and list the generated sitemaps. Defaultfalseboolean
robotsTxtOptions.transformRobotsTxt (optional)Custom robots.txt transformer function. (Example:custom-robots-txt-transformer)

Default:async(config, robotsTxt)=> robotsTxt
async function
robotsTxtOptions.policies (optional)Policies for generatingrobots.txt.

Default:
[{ userAgent: '*', allow: '/' }]
IRobotPolicy[]
robotsTxtOptions.additionalSitemaps (optional)Options to add additional sitemaps torobots.txt host entrystring[]
robotsTxtOptions.includeNonIndexSitemaps (optional)From v2.4x onwards, generatedrobots.txt will only contain url ofindex sitemap and custom provided endpoints fromrobotsTxtOptions.additionalSitemaps.

This is to prevent duplicate url submission (once through index-sitemap -> sitemap-url and once through robots.txt -> HOST)

Set this optiontrue to add all generated sitemap endpoints torobots.txt

Defaultfalse (Recommended)
boolean

Custom transformation function

Custom transformation provides an extension method to add, remove or excludepath orproperties from a url-set. Transform function runsfor eachrelative path in the sitemap. And use thekey:value object to add properties in the XML.

Returningnull value from the transformation function will result in the exclusion of that specificrelative-path from the generated sitemap list.

/**@type {import('next-sitemap').IConfig} */module.exports={transform:async(config,path)=>{// custom function to ignore the pathif(customIgnoreFunction(path)){returnnull}// only create changefreq along with path// returning partial properties will result in generation of XML field with only returned values.if(customLimitedField(path)){// This returns `path` & `changefreq`. Hence it will result in the generation of XML field with `path` and  `changefreq` properties only.return{loc:path,// => this will be exported as http(s)://<config.siteUrl>/<path>changefreq:'weekly',}}// Use default transformation for all other casesreturn{loc:path,// => this will be exported as http(s)://<config.siteUrl>/<path>changefreq:config.changefreq,priority:config.priority,lastmod:config.autoLastmod ?newDate().toISOString() :undefined,alternateRefs:config.alternateRefs??[],}},}

Additional paths function

additionalPaths this function can be useful if you have a large list of pages, but you don't want to render them all and usefallback: true. Result of executing this function will be added to the general list of paths and processed withsitemapSize. You are free to add dynamic paths, but unlikeadditionalSitemap, you do not need to split the list of paths into different files in case there are a lot of paths for one file.

If your function returns a path that already exists, then it will simply be updated, duplication will not happen.

/**@type {import('next-sitemap').IConfig} */module.exports={additionalPaths:async(config)=>{constresult=[]// required value onlyresult.push({loc:'/additional-page-1'})// all possible valuesresult.push({loc:'/additional-page-2',changefreq:'yearly',priority:0.7,lastmod:newDate().toISOString(),// acts only on '/additional-page-2'alternateRefs:[{href:'https://es.example.com',hreflang:'es',},{href:'https://fr.example.com',hreflang:'fr',},],})// using transformation from the current configurationresult.push(awaitconfig.transform(config,'/additional-page-3'))returnresult},}

Google News, image and video sitemap

Url set can contain additional sitemaps defined by google. These areGoogle News sitemap,image sitemap orvideo sitemap.You can add the values for these sitemaps by updating entry intransform function or adding it withadditionalPaths. You have to return a sitemap entry in both cases, so it's the best place for updatingthe output. This example will add an image and news tag to each entry but IRL you would of course use it withsome condition or withinadditionalPaths result.

/**@type {import('next-sitemap').IConfig} */constconfig={transform:async(config,path)=>{return{loc:path,// => this will be exported as http(s)://<config.siteUrl>/<path>changefreq:config.changefreq,priority:config.priority,lastmod:config.autoLastmod ?newDate().toISOString() :undefined,images:[{loc:'https://example.com/image.jpg'}],news:{title:'Article 1',publicationName:'Google Scholar',publicationLanguage:'en',date:newDate(),},}},}exportdefaultconfig

Full configuration example

Here's an examplenext-sitemap.config.js configuration with all options

/**@type {import('next-sitemap').IConfig} */module.exports={siteUrl:'https://example.com',changefreq:'daily',priority:0.7,sitemapSize:5000,generateRobotsTxt:true,exclude:['/protected-page','/awesome/secret-page'],alternateRefs:[{href:'https://es.example.com',hreflang:'es',},{href:'https://fr.example.com',hreflang:'fr',},],// Default transformation functiontransform:async(config,path)=>{return{loc:path,// => this will be exported as http(s)://<config.siteUrl>/<path>changefreq:config.changefreq,priority:config.priority,lastmod:config.autoLastmod ?newDate().toISOString() :undefined,alternateRefs:config.alternateRefs??[],}},additionalPaths:async(config)=>[awaitconfig.transform(config,'/additional-page'),],robotsTxtOptions:{policies:[{userAgent:'*',allow:'/',},{userAgent:'test-bot',allow:['/path','/path-2'],},{userAgent:'black-listed-bot',disallow:['/sub-path-1','/path-2'],},],additionalSitemaps:['https://example.com/my-custom-sitemap-1.xml','https://example.com/my-custom-sitemap-2.xml','https://example.com/my-custom-sitemap-3.xml',],},}

Above configuration will generate sitemaps based on your project and arobots.txt like this.

# *User-agent:*Allow: /# test-botUser-agent: test-botAllow: /pathAllow: /path-2# black-listed-botUser-agent: black-listed-botDisallow: /sub-path-1Disallow: /path-2# HostHost: https://example.com# SitemapsSitemap: https://example.com/sitemap.xml # Index sitemapSitemap: https://example.com/my-custom-sitemap-1.xmlSitemap: https://example.com/my-custom-sitemap-2.xmlSitemap: https://example.com/my-custom-sitemap-3.xml

Generating dynamic/server-side sitemaps

next-sitemap now provides two APIs to generate server side sitemaps. This will help to dynamically generateindex-sitemap(s) andsitemap(s) by sourcing data from CMS or custom source.

  • getServerSideSitemapIndex: Generates index sitemaps based on urls provided and returnsapplication/xml response. Supports next13+ route.{ts,js} file.

    • To continue using inside pages directory, importgetServerSideSitemapIndexLegacy instead.
  • getServerSideSitemap: Generates sitemap based on field entires and returnsapplication/xml response. Supports next13+ route.{ts,js} file.

    • To continue using inside pages directory, importgetServerSideSitemapLegacy instead.

Server side index-sitemaps (getServerSideSitemapIndex)

Here's a sample script to generate index-sitemap on server side.

1. Index sitemap (app directory)

Createapp/server-sitemap-index.xml/route.ts file.

// app/server-sitemap-index.xml/route.tsimport{getServerSideSitemapIndex}from'next-sitemap'exportasyncfunctionGET(request:Request){// Method to source urls from cms// const urls = await fetch('https//example.com/api')returngetServerSideSitemapIndex(['https://example.com/path-1.xml','https://example.com/path-2.xml',])}
2. Index sitemap (pages directory) (legacy)

Createpages/server-sitemap-index.xml/index.tsx file.

// pages/server-sitemap-index.xml/index.tsximport{getServerSideSitemapIndexLegacy}from'next-sitemap'import{GetServerSideProps}from'next'exportconstgetServerSideProps:GetServerSideProps=async(ctx)=>{// Method to source urls from cms// const urls = await fetch('https//example.com/api')returngetServerSideSitemapIndexLegacy(ctx,['https://example.com/path-1.xml','https://example.com/path-2.xml',])}// Default export to prevent next.js errorsexportdefaultfunctionSitemapIndex(){}

Exclude server index sitemap from robots.txt

Now,next.js is serving the dynamic index-sitemap fromhttp://localhost:3000/server-sitemap-index.xml.

List the dynamic sitemap page inrobotsTxtOptions.additionalSitemaps and exclude this path from static sitemap list.

// next-sitemap.config.js/**@type {import('next-sitemap').IConfig} */module.exports={siteUrl:'https://example.com',generateRobotsTxt:true,exclude:['/server-sitemap-index.xml'],// <= exclude hererobotsTxtOptions:{additionalSitemaps:['https://example.com/server-sitemap-index.xml',// <==== Add here],},}

In this way,next-sitemap will manage the sitemaps for all your static pages and your dynamicindex-sitemap will be listed on robots.txt.


server side sitemap (getServerSideSitemap)

Here's a sample script to generate sitemaps on server side.

1. Sitemaps (app directory)

Createapp/server-sitemap.xml/route.ts file.

// app/server-sitemap.xml/route.tsimport{getServerSideSitemap}from'next-sitemap'exportasyncfunctionGET(request:Request){// Method to source urls from cms// const urls = await fetch('https//example.com/api')returngetServerSideSitemap([{loc:'https://example.com',lastmod:newDate().toISOString(),// changefreq// priority},{loc:'https://example.com/dynamic-path-2',lastmod:newDate().toISOString(),// changefreq// priority},])}
2. Sitemaps (pages directory) (legacy)

Createpages/server-sitemap.xml/index.tsx file.

// pages/server-sitemap.xml/index.tsximport{getServerSideSitemapLegacy}from'next-sitemap'import{GetServerSideProps}from'next'exportconstgetServerSideProps:GetServerSideProps=async(ctx)=>{// Method to source urls from cms// const urls = await fetch('https//example.com/api')constfields=[{loc:'https://example.com',// Absolute urllastmod:newDate().toISOString(),// changefreq// priority},{loc:'https://example.com/dynamic-path-2',// Absolute urllastmod:newDate().toISOString(),// changefreq// priority},]returngetServerSideSitemapLegacy(ctx,fields)}// Default export to prevent next.js errorsexportdefaultfunctionSitemap(){}

Now,next.js is serving the dynamic sitemap fromhttp://localhost:3000/server-sitemap.xml.

List the dynamic sitemap page inrobotsTxtOptions.additionalSitemaps and exclude this path from static sitemap list.

// next-sitemap.config.js/**@type {import('next-sitemap').IConfig} */module.exports={siteUrl:'https://example.com',generateRobotsTxt:true,exclude:['/server-sitemap.xml'],// <= exclude hererobotsTxtOptions:{additionalSitemaps:['https://example.com/server-sitemap.xml',// <==== Add here],},}

In this way,next-sitemap will manage the sitemaps for all your static pages and your dynamic sitemap will be listed on robots.txt.

Typescript JSDoc

Add the following line of code in yournext-sitemap.config.js for nice typescript autocomplete! 💖

/**@type {import('next-sitemap').IConfig} */module.exports={// YOUR CONFIG}

TS_JSDOC

Contribution

All PRs are welcome :)

About

Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors26


[8]ページ先頭

©2009-2025 Movatter.jp