NextJS中站点地图的动态路由

// pages/[id].js
import { useRouter } from 'next/router';

const Article = () => {
  const router = useRouter();
  const { id } = router.query;

  // 假设我们从 API 获取文章数据
  const article = fetchArticleById(id);

  if (!article) {
    return <div>Article not found</div>;
  }

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </div>
  );
};

export default Article;

npm install next-sitemap

// pages/sitemap.xml.js
import { SitemapStream, streamToPromise } from 'next-sitemap';
import fetchArticles from '../api/fetchArticles'; // 假设我们有一个 API 来获取所有文章

export async function get() {
  const articles = await fetchArticles();

  const smStream = new SitemapStream({ hostname: 'https://yourwebsite.com' });

  articles.forEach(article => {
    smStream.write({ url: `/article/${article.id}`, lastmod: article.updatedAt });
  });

  smStream.end();

  const sitemap = await streamToPromise(smStream).then(sm => sm.toString());

  return new Response(sitemap, {
    headers: { 'Content-Type': 'application/xml' },
  });
}

// pages/api/fetchArticles.js
export default async function handler(req, res) {
  // 假设我们从数据库获取文章数据
  const articles = await fetchArticlesFromDatabase();

  res.status(200).json(articles);
}