如果您使用 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 應用程式對搜尋引擎更加友善並建立更好的索引！