Next.js 多域名站点地图生成策略：整合静态与动态内容

在构建复杂的Next.js应用时，尤其当项目需要支持多个域名和多语言（如`en`, `cs`, `de`等），并同时管理来自`/pages`目录的静态路由和通过CMS动态生成的页面时，生成一个全面且符合SEO要求的站点地图成为一项挑战。传统的`next-sitemap`包通常用于处理`/pages`目录下的页面，而CMS驱动的动态页面则常通过服务器端渲染（SSR）的方式生成单独的`server-sitemap.xml`。本文将介绍一种策略，将这两种页面来源统一到一个SSR生成的站点地图中，确保所有页面都能被搜索引擎正确索引。

挑战与现有模式

在一个Next.js项目中，可能存在以下两种页面来源：

1. 静态页面： 位于/pages目录下的文件，例如/pages/about.tsx、/pages/contact.tsx等。这些页面通常通过next-sitemap包进行扫描和生成站点地图。
2. 动态页面： 通过内容管理系统（CMS）管理，并在运行时通过API获取数据渲染的页面。这些页面通常需要通过SSR动态生成其站点地图条目，例如在一个pages/server-sitemap.xml.tsx文件中实现getServerSideProps。

当项目拥有多个域名（例如example.com、example.cz、example.de）且每个域名对应不同的语言版本时，站点地图中的loc（URL）字段必须精确反映页面的正确域名和路径，并且需要包含alternateRefs来指明不同语言版本的对应关系。

原有的next-sitemap.config.js配置可能如下所示，它主要负责处理/pages目录的页面，并排除server-sitemap.xml：

// next-sitemap.config.js
module.exports = {
  siteUrl: "http://localhost:3000", // 这是一个占位符，实际应为主要域名
  exclude: ['/server-sitemap.xml'], // 排除由SSR生成的sitemap
  generateRobotsTxt: true,
  robotsTxtOptions: {
    additionalSitemaps: [`http://localhost:3000/server-sitemap.xml`], // 指向SSR生成的sitemap
  },
  transform: async (_, path) => {
    return {
      loc: path,
      lastmod: new Date().toISOString(),
    }
  }
};

这种分离的方式导致需要维护两个站点地图源，且/pages目录下的页面若要支持多域名和alternateRefs，则next-sitemap的默认transform函数可能不足以实现复杂的逻辑。

统一站点地图生成方案

为了解决上述挑战，我们可以将所有站点地图的生成逻辑集中到pages/server-sitemap.xml.tsx文件的getServerSideProps中。这样，无论是CMS驱动的页面还是/pages目录下的“静态”页面，都可以通过统一的逻辑来构建其多域名、多语言的URL和alternateRefs。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

下载

核心思路：

1. 在getServerSideProps中，首先定义一个包含所有“静态”路由的数组。这些路由需要手动或通过某种辅助函数生成，并包含完整的域名和alternateRefs信息。
2. 接着，像往常一样从CMS获取动态页面数据，并为其构建站点地图条目。
3. 最后，将静态路由和动态路由合并，并通过getServerSideSitemap返回。

示例代码：整合静态与动态路由

以下是修改后的pages/server-sitemap.xml.tsx示例，展示如何整合两种类型的页面：

// pages/server-sitemap.xml.tsx
import { GetServerSideProps } from 'next';
import { getServerSideSitemap, ISitemapField } from 'next-sitemap';

// 假设这些类型和常量已定义
// type PageEntity = { generatedUrl: string; updatedAt: string; localizations?: { generatedUrl: string; locale: string }[] };
// const STRAPI_ENDPOINTS = { PAGES: 'pages' };
// const fetchAPI = async (endpoint: string, options?: any) => { /* ... */ return [] as T; };
// const i18n = { locales: ['en', 'cs', 'de', 'ua', 'pl', 'de-AT'] }; // 你的所有语言环境
// const languageToDomains: Record = {
//   'en': 'example.com',
//   'cs': 'example.cz',
//   'de': 'example.de',
//   'ua': 'example.ua',
//   'pl': 'example.pl',
//   'de-AT': 'example.at',
// };

// 辅助函数：根据语言环境和路径构建完整的URL
const buildLocalizedUrl = (locale: string, path: string) =>
  `https://${languageToDomains[locale]}${path}`;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const allFields: ISitemapField[] = [];

  // 1. 定义和生成静态路由的Sitemap字段
  // 这些是存在于 /pages 目录下的，但需要多域名/多语言处理的页面
  const staticPageDefinitions = [
    {
      basePath: '/about', // 页面在所有语言中的概念性路径
      localizedPaths: {
        'en': '/about',
        'cs': '/o-nas',
        'de': '/ueber-uns',
        // ... 其他语言的路径
      },
      lastmod: new Date().toISOString(), // 静态页面的最后修改时间，可根据实际情况调整
    },
    {
      basePath: '/contact',
      localizedPaths: {
        'en': '/contact',
        'cs': '/kontakt',
        'de': '/kontakt',
        // ...
      },
      lastmod: new Date().toISOString(),
    },
    // ... 更多静态页面定义
  ];

  for (const pageDef of staticPageDefinitions) {
    for (const locale of i18n.locales) {
      const currentPath = pageDef.localizedPaths[locale];
      if (currentPath) {
        const alternateRefs = i18n.locales
          .filter(altLocale => altLocale !== locale && pageDef.localizedPaths[altLocale])
          .map(altLocale => ({
            href: buildLocalizedUrl(altLocale, pageDef.localizedPaths[altLocale]!),
            hreflang: altLocale,
          }));

        allFields.push({
          loc: buildLocalizedUrl(locale, currentPath),
          lastmod: pageDef.lastmod,
          alternateRefs: alternateRefs.length > 0 ? alternateRefs : undefined,
        });
      }
    }
  }

  // 2. 从CMS获取动态路由的Sitemap字段
  for (const locale of i18n.locales) {
    // 假设 fetchAPI 返回的 PageEntity 包含 generatedUrl 和 localizations
    const urls = await fetchAPI(`/${STRAPI_ENDPOINTS.PAGES}`, { params: { locale, populate: "localizations" } });

    urls?.forEach(
      ({ generatedUrl, updatedAt, localizations }) => {
        const alternateRefs = localizations
          ?.filter(alt => alt.locale !== locale) // 排除当前语言
          .map(({ generatedUrl: altUrl, locale: altLocale }) => ({
            href: buildLocalizedUrl(altLocale, altUrl),
            hreflang: altLocale,
          }));

        allFields.push({
          loc: buildLocalizedUrl(locale, generatedUrl),
          lastmod: updatedAt,
          alternateRefs: alternateRefs?.length > 0 ? alternateRefs : undefined,
        });
      }
    );
  }

  // 3. 返回合并后的所有Sitemap字段
  return getServerSideSitemap(ctx, allFields);
};

// 默认导出以防止Next.js报错
export default () => {};

languageToDomains 映射表

languageToDomains 对象是实现多域名站点地图的关键。它将每个语言环境映射到其对应的域名：

// 示例：languageToDomains.ts
export const languageToDomains: Record = {
  'en': 'www.example.com',
  'cs': 'www.example.cz',
  'de': 'www.example.de',
  'ua': 'www.example.ua',
  'pl': 'www.example.pl',
  'de-AT': 'www.example.at',
  // ...根据你的实际情况添加
};

注意事项与优化

1. next-sitemap.config.js 的作用： 如果所有的站点地图条目都通过pages/server-sitemap.xml.tsx生成，那么next-sitemap包的siteUrl和transform功能将不再用于生成主要的站点地图文件。next-sitemap.config.js将主要用于生成robots.txt文件，并确保robots.txt正确地指向你SSR生成的server-sitemap.xml。 因此，next-sitemap.config.js可以简化为：

   // next-sitemap.config.js
   module.exports = {
     siteUrl: "https://www.example.com", // 任意一个主域名即可，主要用于robots.txt的baseURL
     generateRobotsTxt: true,
     robotsTxtOptions: {
       additionalSitemaps: [
         "https://www.example.com/server-sitemap.xml", // 指向你的SSR生成的sitemap
         // 如果有其他语言的单独sitemap，也可以在这里列出
       ],
     },
     // 移除transform和其他sitemap生成相关的配置
     exclude: ['/server-sitemap.xml'], // 确保不重复生成
   };

   请注意，additionalSitemaps中的URL应为实际可访问的完整URL。

2. 静态路由的管理： 在staticPageDefinitions中手动定义静态路由可能在项目规模扩大时变得难以维护。可以考虑：

   • 约定式路由扫描： 开发一个脚本，扫描/pages目录并根据文件结构自动生成staticPageDefinitions。
   • 配置文件： 将静态路由定义存储在单独的JSON或JS配置文件中，便于管理。
   • 动态导入： 对于大量静态页面，可以考虑按需导入或分批处理。

3. lastmod 字段： 对于静态页面，lastmod可以设置为文件的最后修改时间或部署时间。对于动态页面，应使用CMS提供的updatedAt字段，确保搜索引擎能获取到最新的内容更新信息。

4. 性能考量： 如果站点地图包含成千上万的URL，getServerSideProps的执行时间可能会很长。可以考虑：

   • 缓存： 对CMS API的调用结果进行缓存。
   • 分页/分片： 将站点地图拆分为多个文件（sitemap index），每个文件包含一部分URL，以避免单个文件过大。next-sitemap的getServerSideSitemap也支持接收一个数组的ISitemapField，如果需要多个sitemap文件，可以手动生成并返回。

5. 错误处理： 在fetchAPI调用中增加错误处理机制，确保即使CMS服务不可用，站点地图生成也不会完全失败。

总结

通过将所有站点地图的生成逻辑统一到pages/server-sitemap.xml.tsx的getServerSideProps中，Next.js多域名项目可以实现一个集中、灵活且强大的站点地图管理方案。这种方法不仅能够无缝整合静态和动态页面，还能有效处理多语言和多域名的复杂性，通过精确的URL和alternateRefs配置，显著提升网站的SEO表现。关键在于精心设计languageToDomains映射，并构建一套健壮的逻辑来生成包含所有必要信息的ISitemapField数组。