如何在Next.js中构建站点地图生成器（） _Next.js构建站点地图生成器实例

文章图片

Next.js站点地图生成器构建教程

Next.js 是最流行的 React 生产框架之一。凭借路由预取和混合静态和服务器端渲染等功能，Next.js 是一种在生产中优化 React 应用程序的有效工具。
此外，Next.js 以部署解决使用 React 构建 SPA 的一些挑战的技术而闻名。例如，Next.js 带有静态站点生成、图像优化、快速刷新、自动内容缓存和文件系统路由等功能，这些功能在 React 中不可用。
尽管是一个生产就绪的框架，但在 Next.js 中处理 SEO 并不是那么简单。为了在我们的网页中实现有效的 SEO，我们首先需要了解 Next.js 如何处理页面渲染。处理 SEO 的一种流行方法是使用站点地图，它是 Web 应用程序中所有可见 URL 的集合。每个网站都需要站点地图来帮助 Google 等搜索引擎更快地抓取和索引你的网站、改进 SEO，并让你有更好的机会在靠近搜索引擎结果页面顶部的位置进行排名。
如何在Next.js中构建站点地图生成器？在本教程中，我们将在 Next.js 中设置一个动态站点地图，包括详细的Next.js构建站点地图生成器实例。要学习本教程，你需要：

熟悉 CSS、HTML 和 JavaScript ES6
Node.js 和 Watchman 安装在你的开发机器上
用于测试的 iOS 模拟器或 Android 模拟器
安装在开发机器上的代码编辑器
对 React 和 React Native 的基本理解

让我们开始吧！
Next.js站点地图生成器构建教程：安装和设置首先，我们将创建一个新的 Next.js 项目，然后将其配置为在构建时为 Next.js 应用程序中存在的每个页面自动生成站点地图。
要初始化一个新项目，请导航到你的工作目录。然后，在终端或命令提示符中运行适用于 Mac 或 Windows 的相应代码：

npx create-next-app@latest next-sitemap # or yarn create next-app next-sitemap

上面的命令在next-sitemap文件夹中设置了一个新的 Next.js 项目。要确认安装成功，请在中运行以下代码next-sitemap：

npm run dev

应用程序预览应类似于以下屏幕截图：

文章图片
随着我们新的 Next.js 应用程序的启动和运行，让我们构建我们的站点地图生成器，我们将使用它来为我们的网页生成站点地图。
构建站点地图生成器如何在Next.js中构建站点地图生成器？要构建我们的站点地图生成器，我们需要遍历 Next.js 文件系统，特别是 Next.jspages文件夹。我们将检索与文件pages夹中文件关联的所有文件路径，不包括_api和_document文件。
为此，我们将安装一个名为globby的包，它提供扫描文件系统的方法并返回匹配一组指定规则的路径名：
运行下面的代码来安装globby包：

npm i globby

设置next-config.js文件
安装 globby 后，next-config.js使用以下代码更新文件：

module.exports = { ... webpack: (config, { isServer }) => { if (isServer) { require("./scripts/sitemap-generator"); } return config; }, };

该webpack块扩展了 webpack 的配置，然后使用来检查 Next.js 配置是否为客户端或服务器端渲染执行isServer，在我们的例子中，它总是返回true。
每次webpack为服务器端执行配置时，next-config文件都会执行sitemap-generator脚本。
Next.js站点地图生成器构建教程：设置站点地图生成器
接下来，在文件夹scripts的根级别创建一个名为的新文件next-sitemap夹。导航到新创建的文件夹并创建一个名为sitemap-generator.
典型的站点地图架构如下所示：

< url> < loc>http://website.com/page< /loc> < lastmod>date created< /lastmod> < changefreq>monthly< /changefreq> < priority>1.0< /priority> < /url>

为了策划我们项目中所有页面的列表，我们需要动态获取页面并将它们放置在

<
loc>
<
/loc>

块中。将以下代码添加到sitemap-generator文件中：

const fs = require('fs') const globby = require('globby') function addPage(page) { const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '') const route = path === '/index' ? '' : path return `< url> < loc>${`${process.env.WEBSITE_URL}${route}`}< /loc> < lastmod>${new Date().toISOString()}< /lastmod> < changefreq>monthly< /changefreq> < priority>1.0< /priority> < /url>` }

Next.js构建站点地图生成器实例：在上面的代码中，addPage函数搜索pages所有文件夹.js和.mdx文件，用空字符串替换他们扩展。现在，让我们创建一个新函数来生成实际的站点地图：

async function generateSitemap() { // excludes Nextjs files and API routes. const pages = await globby([ 'pages/**/*{.js,.mdx}', '!pages/_*.js', '!pages/api', ]) const sitemap = `< ?xml version="1.0" encoding="UTF-8"?> < urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> ${pages.map(addPage).join('\n')} < /urlset>` fs.writeFileSync('public/sitemap.xml', sitemap) } generateSitemap()

我们创建了一个generateSitemap函数，以及一个pages常量来保存由globby. 最后，我们将所有页面渲染为站点地图，方法是使用${pages.map(addPage).join('\n')}.
接下来，要测试应用程序，请创建一个.env文件并添加以下代码：

WEBSITE_URL=http://localhost:3000

测试站点地图生成器如何在Next.js中构建站点地图生成器？现在我们已经完成了我们的站点地图生成器的创建，让我们看看我们的站点地图的运行情况！运行以下代码为我们的项目启动 Next.js 开发服务器：

npm run dev

你可能会遇到以下错误消息：

Error [ ERR_REQUIRE_ESM]: require() of ES Module

错误来自我们之前安装的 globby 包。globby ≥v12.x 放弃了对 ES 模块导入和导出的支持。虽然我们可以考虑将 import 更改为 dynamic import()，正如错误报告所建议的那样，但这样做会导致 webpack 出现更复杂的错误。
我们最好的选择是使用 globby v11.0.1，它已经针对本教程进行了测试。更新package.json文件中的 globby 包版本：

"globby": "^11.0.1"

接下来，运行以下命令：

npm i

Next.js构建站点地图生成器实例：npm run dev再次运行，你不应该有任何错误。打开public文件夹，你应该会看到一个新创建的sitemap.xml文件。
在你的 Web 浏览器中，访问http://localhost:3000/sitemap.xml，你应该会看到类似于以下屏幕截图的结果：

文章图片
请注意，我们在站点地图上只返回了一个页面 URL。当我们使用站点地图生成器创建新页面时，它们会在构建时自动添加到站点地图中。
让我们用一个例子来证明这一点。about.js在 pages 文件夹中创建一个名为的新文件并添加以下代码：

import React from 'react' const About = () => { return ( < > < Head> < title>About page< /title> < meta name="description" content="This is the about page" /> < link rel="icon" href="https://www.lsbin.com/favicon.ico" /> < /Head> < main> < h1>About< /h1> < /main> < /> ) } export default About

现在，http://localhost:3000/sitemap.xml再次访问，你的站点地图应如下图所示：

文章图片

Next.js构建站点地图生成器实例

随意在你的应用程序中添加任意数量的页面。每个都将自动添加到站点地图中。
Next.js站点地图生成器构建教程结论【如何在Next.js中构建站点地图生成器（）】SEO 是每个开发人员要考虑的重要因素。轻松使你的网页对 SEO 更友好的一种方法是使用站点地图。在本教程中，我们在 Next.js 中构建了一个站点地图生成器，它会自动为你的 Web 应用程序中的每个页面生成一个站点地图。添加站点地图生成器有助于提高你在搜索引擎结果页面 (SERP) 上的排名并吸引更多用户查看你的网站。我希望你喜欢这个教程！