Next.js多域名Sitemap生成策略：整合静态与动态路由

本文详细阐述了在next.js项目中，如何为多语言、多域名站点统一生成sitemap。针对cms动态页面和`/pages`目录下的静态页面，我们提出了一种基于服务器端渲染（ssr）的集中式生成策略，通过`getserversideprops`函数整合所有路由信息，并确保正确处理域名映射与国际化（`alternaterefs`），从而优化搜索引擎索引效率。

引言：Next.js多域名Sitemap的挑战

在构建多语言、多域名的Next.js应用时，管理Sitemap文件是一个常见的复杂任务。传统上，开发者可能会使用不同的工具来处理不同类型的页面：例如，next-sitemap包常用于生成/pages目录下静态路由的Sitemap，而对于从内容管理系统（CMS）获取的动态页面，则可能通过服务器端渲染（SSR）的方式动态生成server-sitemap.xml。

然而，当一个项目需要支持多个域名（如example.com、example.de、example.fr等）且每个域名对应不同的语言版本时，这种分离的Sitemap生成方式会带来诸多挑战：

1. 域名映射复杂性：确保每个Sitemap条目（loc）都指向正确的域名。
2. 国际化支持：为每个页面添加正确的alternateRefs标签，指示其在其他语言/域名下的对应版本，这对于SEO至关重要。
3. 维护成本：同时维护多个Sitemap生成逻辑，容易出错且难以扩展。

本文旨在提供一种统一且高效的解决方案，通过Next.js的SSR能力，将所有路由（无论是静态还是动态）的Sitemap生成逻辑集中管理，确保所有页面都能在正确的域名下被搜索引擎索引，并正确处理国际化信息。

核心策略：SSR统一Sitemap生成

解决多域名Sitemap挑战的核心策略是利用Next.js的getServerSideProps函数进行服务器端Sitemap的统一生成。这种方法允许我们在服务器请求时动态地构建完整的Sitemap内容，从而：

• 集中管理：所有Sitemap条目（包括静态页面和动态CMS页面）都在一个地方生成。
• 灵活的域名与语言处理：可以根据请求上下文或预设的语言-域名映射，动态地为每个页面条目分配正确的域名和alternateRefs。
• 实时性：CMS更新后，Sitemap可以立即反映最新内容，无需重新部署。

我们将创建一个特殊的页面（例如pages/server-sitemap.xml.ts），其getServerSideProps函数将负责获取所有需要包含在Sitemap中的页面信息，并以XML格式返回。

实现步骤与代码示例

1. 准备工作：域名与语言映射

首先，我们需要一个机制来将语言代码映射到对应的域名。这通常是一个简单的JavaScript对象或Map。

// utils/i18n.ts (示例)
export const i18n = {
  locales: ["en", "cs", "de", "ua", "pl", "de-AT"],
  defaultLocale: "en",
};

// 定义语言到域名的映射
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", // 针对特定区域的域名
  // ... 其他语言和域名
};

2. 动态CMS页面Sitemap生成

我们将从CMS获取所有页面数据，并为每个页面生成一个ISitemapField对象。关键在于为每个页面构建正确的loc（包含域名）和alternateRefs。

CopyWeb

AI网页设计转换工具，可以将屏幕截图、网站URL转换为代码组件

下载

// 假设 fetchAPI 是一个用于从CMS获取数据的函数
// 假设 PageEntity 是CMS页面数据的类型接口
// 假设 STRAPI_ENDPOINTS.PAGES 是CMS页面的API端点
import { ISitemapField } from "next-sitemap"; // next-sitemap 提供的类型

// ... 在 getServerSideProps 内部或辅助函数中
async function generateCmsSitemapFields(): Promise {
  const cmsFields: ISitemapField[] = [];

  for (const locale of i18n.locales) {
    // 从CMS获取指定语言的所有页面数据
    const urls = await fetchAPI(`/${STRAPI_ENDPOINTS.PAGES}`, {
      params: { locale, populate: "localizations" },
    });

    urls?.forEach(
      ({ generatedUrl, updatedAt, localizations }) => {
        // 构建当前语言页面的 alternateRefs
        const alternateRefs = localizations?.map(
          ({ generatedUrl: altUrl, locale: altLocale }) => ({
            href: `https://${languageToDomains[altLocale]}${altUrl}`,
            hreflang: altLocale,
          })
        ) || [];

        // 添加当前语言页面的自身引用，确保完整性
        alternateRefs.push({
          href: `https://${languageToDomains[locale]}${generatedUrl}`,
          hreflang: locale,
        });

        cmsFields.push({
          loc: `https://${languageToDomains[locale]}${generatedUrl}`,
          lastmod: updatedAt,
          alternateRefs: alternateRefs,
        });
      }
    );
  }
  return cmsFields;
}

3. 静态/pages目录页面Sitemap集成

对于/pages目录下的静态页面（例如 /about, /contact），我们也需要将其纳入Sitemap。由于它们没有CMS数据，我们需要手动定义这些基础路径，然后通过循环语言来生成它们的多域名/多语言版本。

// ... 在 getServerSideProps 内部或辅助函数中
async function generateStaticSitemapFields(): Promise {
  const staticFields: ISitemapField[] = [];
  // 定义所有静态页面的基础路径，这些路径在所有语言版本中都存在
  const baseStaticPaths = ["/", "/about", "/contact", "/privacy-policy"]; // 示例路径

  for (const locale of i18n.locales) {
    for (const path of baseStaticPaths) {
      // 为当前路径和语言生成 alternateRefs
      const alternateRefs = i18n.locales.map((altLocale) => ({
        href: `https://${languageToDomains[altLocale]}${path}`,
        hreflang: altLocale,
      }));

      staticFields.push({
        loc: `https://${languageToDomains[locale]}${path}`,
        lastmod: new Date().toISOString(), // 静态页面的lastmod可以设置为部署时间或固定值
        alternateRefs: alternateRefs,
      });
    }
  }
  return staticFields;
}

4. 合并与输出：完整的pages/server-sitemap.xml.ts

现在，我们将上述逻辑整合到一个pages/server-sitemap.xml.ts文件中。

import { GetServerSideProps } from "next";
import { getServerSideSitemap, ISitemapField } from "next-sitemap";
import { i18n, languageToDomains } from "../utils/i18n"; // 假设路径
import { fetchAPI, STRAPI_ENDPOINTS, PageEntity } from "../utils/api"; // 假设路径和类型

// 动态CMS页面Sitemap生成辅助函数
async function generateCmsSitemapFields(): Promise {
  const cmsFields: ISitemapField[] = [];

  for (const locale of i18n.locales) {
    const urls = await fetchAPI(`/${STRAPI_ENDPOINTS.PAGES}`, {
      params: { locale, populate: "localizations" },
    });

    urls?.forEach(
      ({ generatedUrl, updatedAt, localizations }) => {
        const alternateRefs = localizations?.map(
          ({ generatedUrl: altUrl, locale: altLocale }) => ({
            href: `https://${languageToDomains[altLocale]}${altUrl}`,
            hreflang: altLocale,
          })
        ) || [];

        // 确保包含当前语言的自身引用
        alternateRefs.push({
          href: `https://${languageToDomains[locale]}${generatedUrl}`,
          hreflang: locale,
        });

        cmsFields.push({
          loc: `https://${languageToDomains[locale]}${generatedUrl}`,
          lastmod: updatedAt,
          alternateRefs: alternateRefs,
        });
      }
    );
  }
  return cmsFields;
}

// 静态页面Sitemap生成辅助函数
async function generateStaticSitemapFields(): Promise {
  const staticFields: ISitemapField[] = [];
  const baseStaticPaths = ["/", "/about", "/contact", "/privacy-policy"];

  for (const locale of i18n.locales) {
    for (const path of baseStaticPaths) {
      const alternateRefs = i18n.locales.map((altLocale) => ({
        href: `https://${languageToDomains[altLocale]}${path}`,
        hreflang: altLocale,
      }));

      staticFields.push({
        loc: `https://${languageToDomains[locale]}${path}`,
        lastmod: new Date().toISOString(),
        alternateRefs: alternateRefs,
      });
    }
  }
  return staticFields;
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const cmsFields = await generateCmsSitemapFields();
  const staticFields = await generateStaticSitemapFields();

  // 合并所有Sitemap字段
  const allFields = [...cmsFields, ...staticFields];

  return getServerSideSitemap(ctx, allFields);
};

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

当访问 /server-sitemap.xml 路径时，Next.js将执行 getServerSideProps 函数，动态生成包含所有静态和动态页面的完整Sitemap，并正确处理多域名和国际化信息。

next-sitemap.config.js 的角色调整

在采用上述统一SSR生成Sitemap的策略后，next-sitemap包将不再负责实际的Sitemap文件生成。它的主要作用将变为生成robots.txt文件，并在此文件中引用我们通过SSR生成的Sitemap。

// next-sitemap.config.js
module.exports = {
  // siteUrl 仍然需要，但它不会用于生成Sitemap，而是用于 robots.txt 中的 Host 指令
  siteUrl: "https://www.example.com", // 您的主域名或默认域名
  // 排除 next-sitemap 尝试生成 sitemap.xml，因为我们已经通过 SSR 生成
  exclude: ["/server-sitemap.xml"],
  generateRobotsTxt: true, // 启用 robots.txt 生成
  robotsTxtOptions: {
    // 确保 robots.txt 引用我们通过 SSR 生成的 sitemap
    additionalSitemaps: [
      `https://www.example.com/server-sitemap.xml`, // 指向您的 SSR 生成的 Sitemap
      // 如果有其他 sitemap，例如针对特定域名或类型的，也可以在此处添加
      // `https://www.example.de/server-sitemap.xml`, // 针对其他域名的 sitemap
    ],
  },
  // transform 函数在此场景下不再需要用于 sitemap 转换，可以移除或保持默认
  // transform: async (_, path) => {
  //   return {
  //     loc: path,
  //     lastmod: new Date().toISOString(),
  //   }
  // }
};

重要提示：如果您的每个域名都有独立的robots.txt需求，那么您可能需要为每个域名都通过SSR动态生成robots.txt，而不是依赖next-sitemap。在大多数多域名场景下，一个统一的robots.txt引用所有Sitemap通常是可行的。

注意事项与最佳实践

1. 性能考量：如果您的网站页面数量巨大（数万甚至数十万），在getServerSideProps中一次性获取所有数据并生成Sitemap可能会导致性能瓶颈。
   • 优化方案：考虑将Sitemap拆分为多个文件（Sitemap Index），例如按语言、按内容类型或按字母顺序。每个子Sitemap仍然可以通过SSR生成。
   • 缓存：在服务器端对Sitemap数据进行缓存，减少对CMS和API的重复请求。
2. 数据准确性：
   • lastmod：确保lastmod字段准确反映页面内容的最后修改时间。对于CMS页面，这通常来自CMS的updatedAt字段；对于静态页面，可以设置为部署时间或定期更新。
   • alternateRefs：仔细检查alternateRefs的逻辑，确保所有语言版本都能正确相互引用，避免出现死循环或缺失引用。
3. 错误处理：在fetchAPI调用中添加适当的错误处理机制，以防CMS或API不可用。Sitemap生成失败不应影响网站的正常运行。
4. 部署与缓存策略：
   • CDN：将Sitemap文件通过CDN分发，提高访问速度和可靠性。
   • 更新频率：搜索引擎通常会定期抓取Sitemap。如果您的内容更新频繁，可以考虑更频繁地更新Sitemap。
5. robots.txt管理：确保robots.txt文件中正确引用了所有生成的Sitemap文件，并且没有阻止搜索引擎抓取Sitemap路径。

总结

通过在Next.js中使用SSR统一生成多域名Sitemap，我们能够有效应对多语言、多域名站点的复杂性。这种策略将静态页面和动态CMS页面的Sitemap生成逻辑集中管理，确保每个Sitemap条目都具有正确的域名和国际化（alternateRefs）信息。这不仅提高了Sitemap的准确性和可维护性，也极大地优化了搜索引擎对网站内容的索引效率，是构建高质量国际化Next.js应用的推荐实践。