yarn add next-sitemapnext-sitemap需要一个基本的配置文件( next-sitemap.config.js )
next-sitemap将默认情况下从.env文件加载环境变量。
/** @type {import('next-sitemap').IConfig} */
module . exports = {
siteUrl : process . env . SITE_URL || 'https://example.com' ,
generateRobotsTxt : true , // (optional)
// ...other options
}添加临时SiteMap作为您的后脚本
{
"build" : " next build " ,
"postbuild" : " next-sitemap "
}您还可以使用自定义配置文件代替next-sitemap.config.js 。只需通过--config <your-config-file>.js构建命令(示例:custom-config-file)
{
"build" : " next build " ,
"postbuild" : " next-sitemap --config awesome.config.js "
}使用PNPM时.npmrc如果要使用后建筑步骤:
//.npmrc
enable-pre-post-scripts=true
从next-sitemap v2.x开始, sitemap.xml将为索引站点地图。它将包含所有其他生成的SiteMap端点的URL。
可以通过设置generateIndexSitemap: false在NextSitemap Config File中关闭索引站点地图的生成。 (这对于不需要索引站点地图的小/爱好站点很有用)(例如:no-index-sitemaps)
在next-sitemap.config.js中定义sitemapSize属性,以将大型站点地图拆分为多个文件。
/** @type {import('next-sitemap').IConfig} */
module . exports = {
siteUrl : 'https://example.com' ,
generateRobotsTxt : true ,
sitemapSize : 7000 ,
}上面是拆分大型站点地图的最小配置。当SiteMap中的URL数量超过7000时, next-sitemap将创建SiteMap(例如SiteMap-0.xml,SiteMap-1.xml)和index(例如SiteMap.xml)文件。
| 财产 | 描述 | 类型 |
|---|---|---|
| Siteurl | 您网站的基础网址 | 细绳 |
| 输出(可选) | Next.js输出模式。检查文档。 | standalone , export |
| changefreq(可选) | 变更频率。默认daily | 细绳 |
| 优先级(可选) | 优先事项。默认为0.7 | 数字 |
| SiteMapbaseFilename(可选) | 文件扩展程序之前生成的SiteMap文件的名称。默认"sitemap" | 细绳 |
| 替代(可选) | 用唯一URL表示多语言支持。默认[] | 替代[] |
| Sitemapsize(可选) | 通过指定站点地图大小,将大型站点地图拆分为多个文件。默认5000 | 数字 |
| AutolastMod(可选) | 添加<lastmod/>属性。默认为true | 真的 |
| 排除(可选) | 相对路径的数组(支持的通配符模式)将排除在sitemap.xml或sitemap-*.xml上的列表中。例如: ['/page-0', '/page-*', '/private/*'] 。除此选项外, next-sitemap还提供了一个自定义transform选项,该选项可用于排除匹配特定模式的URL | 细绳[] |
| sourcedir(可选) | next.js构建目录。默认.next | 细绳 |
| OUTDIR(可选) | 所有生成的文件将导出到此目录。默认public | 细绳 |
| 变换(可选) | 一个转换函数,该函数为站点地图中的每个relative-path运行。从转换函数返回null值将导致从生成的站点地图列表中排除该特定path 。 | 异步函数 |
| 其他路径(可选) | 异步函数返回要添加到生成的站点地图列表的其他路径列表。 | 异步函数 |
| 生成indeDexSitemap | 生成索引站点地图。默认为true | 布尔 |
| GeneratatRobotSTXT(可选) | 生成一个robots.txt文件并列出生成的站点地图。默认false | 布尔 |
| robotstxtxtoptions.transformrobotstxt(可选) | 自定义Robots.txt变形金刚功能。 (示例:custom-robots-txt-transformer) 默认值: async(config, robotsTxt)=> robotsTxt | 异步函数 |
| robotstxtxtoptions.policies(可选) | 生成robots.txt的策略.txt。默认: [{ userAgent: '*', allow: '/' }] | iRobotpolicy [] |
| RobotStxtOptions.AdditionalSitemaps(可选) | 将其他站点地图添加到robots.txt主机条目的选项 | 细绳[] |
| RobotStxtOptions.includenonIndexSitemaps(可选) | 从v2.4x开始,生成的robots.txt将仅包含index sitemap的URL和从robotsTxtOptions.additionalSitemaps提供的自定义提供的端点。这是为了防止重复的URL提交(一旦通过index -sitemap-> sitemap -url,然后通过robots.txt->主机) 设置此选项为 true ,将所有生成的SiteMap端点添加到robots.txt默认 false (推荐) | 布尔 |
自定义转换提供了一种扩展方法,可以从URL集合中添加,删除或排除path或properties 。转换函数为站点地图中的每个relative path运行。并使用key : value对象在XML中添加属性。
从转换函数返回的null值将导致从生成的站点地图列表中排除该特定的relative-path 。
/** @type {import('next-sitemap').IConfig} */
module . exports = {
transform : async ( config , path ) => {
// custom function to ignore the path
if ( customIgnoreFunction ( path ) ) {
return null
}
// 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 cases
return {
loc : path , // => this will be exported as http(s)://<config.siteUrl>/<path>
changefreq : config . changefreq ,
priority : config . priority ,
lastmod : config . autoLastmod ? new Date ( ) . toISOString ( ) : undefined ,
alternateRefs : config . alternateRefs ?? [ ] ,
}
} ,
} 如果您有大量页面列表, additionalPaths此功能可能会很有用,但是您不想渲染所有页面并使用后备:true。执行此功能的结果将添加到一般路径列表中,并使用sitemapSize处理。您可以自由添加动态路径,但是与additionalSitemap不同,您无需将路径列表划分为不同的文件,以防一个文件有很多路径。
如果您的功能返回已经存在的路径,则将简单地进行更新,重复将不会发生。
/** @type {import('next-sitemap').IConfig} */
module . exports = {
additionalPaths : async ( config ) => {
const result = [ ]
// required value only
result . push ( { loc : '/additional-page-1' } )
// all possible values
result . push ( {
loc : '/additional-page-2' ,
changefreq : 'yearly' ,
priority : 0.7 ,
lastmod : new Date ( ) . 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 configuration
result . push ( await config . transform ( config , '/additional-page-3' ) )
return result
} ,
} URL集可以包含Google定义的其他站点地图。这些是Google新闻站点地图,图像站点地图或视频站点地图。您可以通过在transform函数中更新输入或与additionalPaths添加该站点来添加这些站点地图的值。在两种情况下,您都必须返回站点地图条目,因此它是更新输出的最佳场所。此示例将为每个条目添加图像和新闻标签,但是IRL您当然会在某种情况下或在additionalPaths结果中使用它。
/** @type {import('next-sitemap').IConfig} */
const config = {
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 ? new Date ( ) . toISOString ( ) : undefined ,
images : [ { loc : 'https://example.com/image.jpg' } ] ,
news : {
title : 'Article 1' ,
publicationName : 'Google Scholar' ,
publicationLanguage : 'en' ,
date : new Date ( ) ,
} ,
}
} ,
}
export default config 这是带有所有选项的示例next-sitemap.config.js配置
/** @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 function
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 ? new Date ( ) . toISOString ( ) : undefined ,
alternateRefs : config . alternateRefs ?? [ ] ,
}
} ,
additionalPaths : async ( config ) => [
await config . 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' ,
] ,
} ,
}上面的配置将基于您的项目和robots.txt生成站点地图。
# *
User-agent: *
Allow: /
# test-bot
User-agent: test-bot
Allow: /path
Allow: /path-2
# black-listed-bot
User-agent: black-listed-bot
Disallow: /sub-path-1
Disallow: /path-2
# Host
Host: https://example.com
# Sitemaps
Sitemap: https://example.com/sitemap.xml # Index sitemap
Sitemap: https://example.com/my-custom-sitemap-1.xml
Sitemap: https://example.com/my-custom-sitemap-2.xml
Sitemap: https://example.com/my-custom-sitemap-3.xmlnext-sitemap现在提供两个API来生成服务器端站点地图。这将有助于通过从CMS或自定义源中采购数据来动态生成index-sitemap和sitemap 。
getServerSideSitemapIndex :基于提供的URL生成索引站点地图,并返回application/xml响应。支持Next13+路由。{TS,JS}文件。
getServerSideSitemapIndexLegacy 。 getServerSideSitemap :基于字段的整体生成站点地图,并返回application/xml响应。支持Next13+路由。{TS,JS}文件。
getServerSideSitemapLegacy 。这是一个示例脚本,可以在服务器端生成索引sitemap。
创建app/server-sitemap-index.xml/route.ts文件。
// app/server-sitemap-index.xml/route.ts
import { getServerSideSitemapIndex } from 'next-sitemap'
export async function GET ( request : Request ) {
// Method to source urls from cms
// const urls = await fetch('https//example.com/api')
return getServerSideSitemapIndex ( [
'https://example.com/path-1.xml' ,
'https://example.com/path-2.xml' ,
] )
}创建pages/server-sitemap-index.xml/index.tsx文件。
// pages/server-sitemap-index.xml/index.tsx
import { getServerSideSitemapIndexLegacy } from 'next-sitemap'
import { GetServerSideProps } from 'next'
export const getServerSideProps : GetServerSideProps = async ( ctx ) => {
// Method to source urls from cms
// const urls = await fetch('https//example.com/api')
return getServerSideSitemapIndexLegacy ( ctx , [
'https://example.com/path-1.xml' ,
'https://example.com/path-2.xml' ,
] )
}
// Default export to prevent next.js errors
export default function SitemapIndex ( ) { } 现在, next.js从http://localhost:3000/server-sitemap-index.xml提供动态索引 - sitemap。
在robotsTxtOptions.additionalSitemaps中列出动态站点地图页面,并将此路径排除在静态站点列表中。
// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module . exports = {
siteUrl : 'https://example.com' ,
generateRobotsTxt : true ,
exclude : [ '/server-sitemap-index.xml' ] , // <= exclude here
robotsTxtOptions : {
additionalSitemaps : [
'https://example.com/server-sitemap-index.xml' , // <==== Add here
] ,
} ,
}这样, next-sitemap将管理所有静态页面的站点地图,并且您的动态index-sitemap将在robots.txt上列出。
这是一个示例脚本,可以在服务器端生成站点地图。
创建app/server-sitemap.xml/route.ts文件。
// app/server-sitemap.xml/route.ts
import { getServerSideSitemap } from 'next-sitemap'
export async function GET ( request : Request ) {
// Method to source urls from cms
// const urls = await fetch('https//example.com/api')
return getServerSideSitemap ( [
{
loc : 'https://example.com' ,
lastmod : new Date ( ) . toISOString ( ) ,
// changefreq
// priority
} ,
{
loc : 'https://example.com/dynamic-path-2' ,
lastmod : new Date ( ) . toISOString ( ) ,
// changefreq
// priority
} ,
] )
}创建pages/server-sitemap.xml/index.tsx文件。
// pages/server-sitemap.xml/index.tsx
import { getServerSideSitemapLegacy } from 'next-sitemap'
import { GetServerSideProps } from 'next'
export const getServerSideProps : GetServerSideProps = async ( ctx ) => {
// Method to source urls from cms
// const urls = await fetch('https//example.com/api')
const fields = [
{
loc : 'https://example.com' , // Absolute url
lastmod : new Date ( ) . toISOString ( ) ,
// changefreq
// priority
} ,
{
loc : 'https://example.com/dynamic-path-2' , // Absolute url
lastmod : new Date ( ) . toISOString ( ) ,
// changefreq
// priority
} ,
]
return getServerSideSitemapLegacy ( ctx , fields )
}
// Default export to prevent next.js errors
export default function Sitemap ( ) { }现在, next.js将从http://localhost:3000/server-sitemap.xml提供动态站点地图。
在robotsTxtOptions.additionalSitemaps中列出动态站点地图页面,并将此路径排除在静态站点列表中。
// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module . exports = {
siteUrl : 'https://example.com' ,
generateRobotsTxt : true ,
exclude : [ '/server-sitemap.xml' ] , // <= exclude here
robotsTxtOptions : {
additionalSitemaps : [
'https://example.com/server-sitemap.xml' , // <==== Add here
] ,
} ,
}这样, next-sitemap将管理所有静态页面的站点地图,并且您的动态站点地图将在robots.txt上列出。
在您的next-sitemap.config.js中添加以下代码行,以使其均为打字稿自动完成! ?
/** @type {import('next-sitemap').IConfig} */
module . exports = {
// YOUR CONFIG
} 
欢迎所有PR :)