为 Next.js 14 博客创建动态网站地图的笔记

41 min read

介绍

在现代 Web 开发中，保持强大的在线存在是成功的关键。创建 sitemap.xml 是一个常被忽视的重要方面，它不仅能增强搜索引擎优化（SEO），还能通过提供清晰的内容结构提升用户体验。

这篇笔记将指导你如何在 Next.js 14 中使用动态网站地图。通过无缝集成动态网站地图，确保内容能被搜索引擎轻松发现。

理解网站地图

什么是网站地图？

网站地图是一种文件，为搜索引擎提供网站结构的路线图，突出显示重要页面。它确保搜索引擎爬虫能够高效地索引内容。传统的网站地图是静态的，需要手动更新。现代 Web 开发需要一种更动态的方式。

动态网站地图的重要性

动态网站地图在运行时自动更新，每个新帖子或更新的页面都会无缝地纳入网站地图，确保搜索引擎总是知道最新内容。动态网站地图能及时索引新内容，提升网站在搜索引擎结果中的可见性，同时也能改善用户体验，提供清晰有序的路径。

SEO 优势

搜索引擎使用网站地图来了解网站结构。动态网站地图确保搜索引擎爬虫高效地索引内容，提升其出现在搜索结果中的几率。网站地图允许指定每个页面的优先级和更新频率，提供不同网站部分重要性的有价值信息。

设置 Next.js 14 项目

安装 Next.js 14

使用 create-next-app 快速开始：

pnpx create-next-app@latest

在安装过程中选择适合你的配置：

✔ What is your project named? … my-nextjs-blog
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

构建网站地图生成逻辑

使用 fetch 获取动态数据

  1. 在 src/app/sitemap.js 文件中添加以下代码：
import { MetadataRoute } from "next";

const URL = "https://acme.com";

const fetchPostIds = async () => {
  try {
    const response = await fetch('https://your_site/api/v1/post/ids');
    const data = await response.json();
    if (data.code === 1000) {
      return data.data.map(post => ({
        id: post.id,
        createdAt: post.createdAt,
      }));
    }
    throw new Error('Failed to fetch post ids');
  } catch (error) {
    console.error('Error fetching post ids:', error);
    return [];
  }
};

const generatePostSitemapObjects = async () => {
  const posts = await fetchPostIds();
  return posts.map(post => ({
    url: `${URL}/blog/${post.id}`,
    lastModified: post.createdAt,
  }));
};

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const staticRoutes = [
    {
      url: `${URL}`,
      priority: 1,
    },
    {
      url: `${URL}/blog`,
      changeFrequency: "weekly",
      priority: 0.8,
    },
  ];

  const dynamicRoutes = await generatePostSitemapObjects();

  return [...staticRoutes, ...dynamicRoutes];
}

代码解释

  1. fetchPostIds: 通过 fetch 请求从指定接口获取数据。如果请求成功且返回的 code 为 1000，则返回包含 id 和 createdAt 属性的对象数组。

  2. generatePostSitemapObjects: 调用 fetchPostIds 获取数据，将每个对象映射为包含 url 和 lastModified 属性的网站地图对象。

  3. sitemap: 默认导出的异步函数，定义静态路由，调用 generatePostSitemapObjects 获取动态路由，最后合并返回。

访问动态网站地图

启动开发服务器：

pnpm dev

访问 http://localhost:3000/sitemap.xml 查看生成的动态网站地图。

通过以上步骤，你可以生成包含动态内容的 Next.js 网站地图，确保每次接口数据更新时，网站地图也会自动更新。