如果您使用 Next.js 建立網站，您可能希望搜尋引擎能夠有效地發現您的頁面並為其建立索引。改進此過程的一種方法是建立網站地圖。網站地圖是一個列出您網站上所有網址的文件，可協助 Google 等搜尋引擎更快地抓取您的網站並將其編入索引。
在本指南中，我們將逐步介紹如何在 Next.js 專案中安裝和設定 next-sitemap。我們還將介紹擁有網站地圖的好處，並包含帶有「Hello World」Next.js 應用程式的範例程式碼以說明其工作原理。
在我們深入了解安裝過程之前，讓我們先簡單討論一下使用 next-sitemap 的主要好處：
改進的 SEO：結構良好的網站地圖可幫助 Google 等搜尋引擎更有效地發現您的頁面，從而實現更好的索引和潛在的更高搜尋排名。
更快的抓取：透過向搜尋引擎提供您網站的路線圖，您可以讓他們更快地抓取您的頁面並為其建立索引。
處理動態路由：對於具有動態路由的網站，下一個網站地圖可以輕鬆為動態內容產生 URL，確保所有頁面都可被發現。
自訂網站地圖：下一個網站地圖可讓您使用設定優先順序、變更頻率甚至排除某些頁面等選項來自訂網站地圖。
首先，您需要在 Next.js 專案中安裝 next-sitemap 套件。在終端機中執行以下命令：
npm install next-sitemap
或者，如果您使用的是 Yarn：
yarn add next-sitemap
安裝軟體套件後，下一步是在專案的根目錄下建立一個名為 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 數量。
現在，您需要在 package.json 檔案中新增一個腳本，以便在建立專案時產生網站地圖。
具體操作方法如下：
{
"scripts": {
"build": "next build",
"postbuild": "next-sitemap"
}
}
這將確保每次建置後，都會根據您的配置自動產生網站地圖。
現在一切都已設定完畢，執行以下命令來建立專案並產生網站地圖：
npm run build
或用紗線：
yarn build
建置完成後，將在專案的 public/ 資料夾中產生 sitemap.xml 檔案（以及可選的 robots.txt 檔案）。這些檔案將包含您的 Next.js 應用程式的所有 URL，可供搜尋引擎抓取。
為了示範 next-sitemap 的工作原理，讓我們建立一個簡單的「Hello World」Next.js 應用程式。這是一個基本的 Next.js 頁面：
// pages/index.js
export default function Home() {
return (
<div>
<h1>Hello World</h1>
<p>Welcome to my Next.js app!</p>
</div>
);
}
現在，像這樣設定你的 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
的 robots.txthttps://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 應用程式對搜尋引擎更加友善且索引更好！
以上是如何在 Next.js 應用程式中安裝和使用「next-sitemap」：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
