Next.js 多域名站点地图生成指南-js教程-PHP中文网

Next.js 多域名站点地图生成指南

心靈之曲

发布： 2025-11-16 22:58:01

原创

771人浏览过

next.js 多域名站点地图生成指南

本文档旨在解决在使用 Next.js 和 `next-sitemap` 包构建多域名站点时，如何为 `/pages` 目录下的路由生成站点地图的问题。我们将结合服务端渲染和动态数据，提供一个完整的解决方案，确保所有域名和路由都能正确地包含在站点地图中。

为 Next.js 多域名站点生成完整站点地图

在使用 Next.js 构建多语言、多域名站点时，生成准确且完整的站点地图至关重要。这有助于搜索引擎更好地抓取和索引你的网站，提高 SEO 效果。本文将介绍如何结合 next-sitemap 包，为包含静态路由（/pages 目录）和动态路由（CMS 数据）的 Next.js 应用生成多域名站点地图。

场景描述

假设你正在开发一个 Next.js 应用，该应用支持多个域名，每个域名对应一种语言。静态路由位于 /pages 目录下，动态路由数据来自 CMS。你需要为每个域名生成包含所有路由的站点地图。

解决方案

核心思路是结合 next-sitemap 的配置和 Next.js 的服务端渲染能力，将静态路由和动态路由的数据合并，生成完整的站点地图。

1. 处理动态路由（CMS 数据）

首先，我们需要一个函数来获取 CMS 中的动态路由数据，并根据不同的语言环境生成对应的 URL。以下是一个示例：

import { GetServerSideProps } from 'next';
import { getServerSideSitemap } from 'next-sitemap';
import { i18n } from '../next-i18next.config'; // 假设你使用了 next-i18next
import { fetchAPI } from '../utils/api'; // 你的 API 请求函数

interface ISitemapField {
  loc: string;
  lastmod: string;
  alternateRefs?: { href: string; hreflang: string; }[];
}

const languageToDomains = {
  en: 'example.com',
  cs: 'example.cz',
  de: 'example.de',
  ua: 'example.ua',
  pl: 'example.pl',
  'de-AT': 'example.at',
};

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

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

    fields.push(
      ...urls?.map(
        ({ generatedUrl, updatedAt, localizations }) =>
          ({
            loc: `https://${languageToDomains[locale]}${generatedUrl}`,
            lastmod: updatedAt,
            alternateRefs: localizations?.map(({generatedUrl: altUrl, locale: altLocale}) => ({
              href: `https://${languageToDomains[altLocale]}${altUrl}`,
              hreflang: altLocale,
            }
            ))
          } as ISitemapField),
      ),
    );
  }

  return getServerSideSitemap(ctx, fields);
};

// Default export to prevent next.js errors
export default () => {};

登录后复制

这段代码使用 getServerSideProps 函数，在服务器端获取 CMS 数据，并为每个语言环境生成对应的 URL。languageToDomains 对象定义了语言和域名之间的映射关系。

2. 处理静态路由（/pages 目录）

关键在于如何将 /pages 目录下的静态路由添加到站点地图中。一种方法是在 getServerSideProps 函数中手动添加静态路由：

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

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

  // 添加所有静态路由
  const staticRoutes: ISitemapField[] = [
    {
      loc: `https://example.com`, // 替换为你的域名
      lastmod: new Date().toISOString(),
      alternateRefs: i18n.locales.map(locale => ({
        href: `https://${languageToDomains[locale]}`, // 替换为你的域名
        hreflang: locale,
      })),
    },
    {
      loc: `https://example.com/about`, // 替换为你的域名
      lastmod: new Date().toISOString(),
      alternateRefs: i18n.locales.map(locale => ({
        href: `https://${languageToDomains[locale]}/about`, // 替换为你的域名
        hreflang: locale,
      })),
    },
    // 添加更多静态路由
  ];

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

    fields.push(
      ...urls?.map(
        ({ generatedUrl, updatedAt, localizations }) =>
          ({
            loc: `https://${languageToDomains[locale]}${generatedUrl}`,
            lastmod: updatedAt,
            alternateRefs: localizations?.map(({generatedUrl: altUrl, locale: altLocale}) => ({
              href: `https://${languageToDomains[altLocale]}${altUrl}`,
              hreflang: altLocale,
            }
            ))
          } as ISitemapField),
      ),
    );
  }


  const allRoutes = [...staticRoutes, ...fields];

  return getServerSideSitemap(ctx, allRoutes);
};

// Default export to prevent next.js errors
export default () => {};

登录后复制

在这个例子中，我们创建了一个 staticRoutes 数组，手动添加了 / 和 /about 路由。你需要根据你的项目，添加所有静态路由。

3. 配置 next-sitemap.config.js

module.exports = {
  siteUrl: 'http://localhost:3000', // 替换为你的默认域名，这里只是占位符
  exclude: ['/server-sitemap.xml'], // 排除服务端生成的站点地图
  generateRobotsTxt: true,
  robotsTxtOptions: {
    additionalSitemaps: [`http://localhost:3000/server-sitemap.xml`], // 包含服务端生成的站点地图
  },
  transform: async (_, path) => {
    return {
      loc: path,
      lastmod: new Date().toISOString(),
    };
  },
};

登录后复制

next-sitemap.config.js 文件用于配置 next-sitemap 包。这里需要注意以下几点：