本文档旨在解决在使用 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(`/${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 函数中手动添加静态路由：
本系统是一套为影楼婚纱摄影网站量身设计打造的商业网站建设系统，本系统以品牌介绍、作品展示、取景景点介绍、服务价格体系、加盟合作、人才招聘、联系我们、交流论坛八大主要功能模块 ,以及诸多实用的辅助模块组成。用户名：8minutemanager 密码：ersui1215 后台地址http://www.你的域名.com/8minutemanager 修改了： 1、编辑器无法上传图片的问题 2、新
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(`/${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 包。这里需要注意以下几点：
- siteUrl：设置为你的默认域名，但这个配置在服务端生成的站点地图中会被覆盖。
- exclude：排除服务端生成的站点地图，防止重复生成。
- robotsTxtOptions：包含服务端生成的站点地图到 robots.txt 文件中。
4. 注意事项
- 确保 languageToDomains 对象包含所有语言和域名之间的映射关系。
- 手动添加静态路由时，需要仔细检查，确保所有路由都被包含。
- 根据你的 CMS 数据结构，调整 fetchAPI 函数和数据处理逻辑。
- siteUrl 在 next-sitemap.config.js 只是占位符，因为我们在服务端渲染中动态生成 URL。
5. 总结
通过结合 next-sitemap 的配置和 Next.js 的服务端渲染能力，我们可以为多域名站点生成完整的站点地图。关键在于：
- 使用 getServerSideProps 函数获取动态路由数据。
- 手动添加静态路由到 getServerSideProps 函数中。
- 正确配置 next-sitemap.config.js 文件。
希望本文能够帮助你解决 Next.js 多域名站点地图生成的问题。记住，根据你的具体项目，可能需要进行一些调整。
