如果您使用 Next.js 构建网站，您可能希望搜索引擎能够有效地发现您的页面并为其建立索引。改进此过程的一种方法是创建站点地图。站点地图是一个列出您网站上所有网址的文件，可帮助 Google 等搜索引擎更快地抓取您的网站并将其编入索引。

在本指南中，我们将逐步介绍如何在 Next.js 项目中安装和配置 next-sitemap。我们还将介绍拥有站点地图的好处，并包含带有“Hello World”Next.js 应用程序的示例代码以说明其工作原理。

使用下一个站点地图的好处

在我们深入了解安装过程之前，让我们简要讨论一下使用 next-sitemap 的主要好处：

1. 改进 SEO：结构良好的站点地图可帮助 Google 等搜索引擎更有效地发现您的页面，从而实现更好的索引和潜在的更高搜索排名。

2. 更快的抓取：通过向搜索引擎提供您网站的路线图，您可以让他们更快地抓取您的页面并为其建立索引。

3. 处理动态路由：对于具有动态路由的网站，下一个站点地图可以轻松生成动态内容的 URL，确保您的所有页面都可被发现。

4. 自定义站点地图：下一个站点地图允许您使用设置优先级、更改频率甚至排除某些页面等选项来自定义站点地图。

第 1 步：安装下一个站点地图

首先，您需要在 Next.js 项目中安装 next-sitemap 包。在终端中运行以下命令：

npm install next-sitemap

或者，如果您使用的是 Yarn：

yarn add next-sitemap

第2步：创建next-sitemap.js配置文件

安装包后，下一步是在项目的根目录下创建一个名为 next-sitemap.config.js 的配置文件。该文件将包含用于生成站点地图的设置。

这是一个基本配置：

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

在上面的代码中，我们使用 siteUrl 指定您网站的基本 URL。 generateRobotsTxt 选​​项会在站点地图旁边生成一个 robots.txt 文件，而 sitemapSize 则确定要包含在每个站点地图文件中的 URL 数量。

步骤 3：使用 Sitemap 脚本更新 package.json

现在，您需要在 package.json 文件中添加一个脚本，以便在构建项目时生成站点地图。

具体操作方法如下：

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

这将确保每次构建后，都会根据您的配置自动生成站点地图。

第 4 步：构建并生成站点地图

现在一切都已设置完毕，运行以下命令来构建项目并生成站点地图：

npm run build

或者使用纱线：

yarn build

构建完成后，将在项目的 public/ 文件夹中生成 sitemap.xml 文件（以及可选的 robots.txt 文件）。这些文件将包含您的 Next.js 应用程序的所有 URL，可供搜索引擎抓取。

示例：带有 next-sitemap 的“Hello World”Next.js 应用程序

为了演示 next-sitemap 的工作原理，让我们创建一个简单的“Hello World”Next.js 应用程序。这是一个基本的 Next.js 页面：

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

现在，像这样配置你的 next-sitemap.config.js：

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

接下来，将以下内容添加到 package.json 中：

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

运行 npm run build 后，您将在 public/ 目录中找到您的站点地图，其中包含“Hello World”主页的 URL。

现场演示

我的网站 https://rajeshkumaryadav.com 正在使用此包在构建过程中自动生成站点地图。下面是包含 sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

结论

通过遵循本指南中概述的步骤，您现在已将 next-sitemap 集成到您的 Next.js 项目中。该工具提供了一种生成站点地图和robots.txt文件的简单方法，可以显着提高您网站的SEO并确保搜索引擎可以有效地发现您的所有内容。

通过此设置，您就可以让您的 Next.js 应用程序对搜索引擎更加友好并建立更好的索引！