如何使用next.js创建动态xml站点地图？检查下面的代码

我正在按照一种方法建立一个网站地图。在http/:localhost:3000上，页面看起来像这样。我下面的博客给出了
sitemap.xml:
*>此XML文件似乎没有任何关联的样式信息

用它。文档树如下所示。 http://localhost:3000/about.jshttp://localhost:3000/activate.jshttp://localhost:3000/blogshttp://localhost:3000/categorieshttp://localhost:3000/contact.jshttp://localhost:3000/disclaimer.jshttp://localhost:3000/index.jshttp://localhost:3000/privacy.jshttp://localhost:3000/profilehttp://localhost:3000/search.jshttp://localhost:3000/signin.jshttp://本地主机：3000/注册。jshttp://localhost:3000/tagshttp://localhost:3000/user [对象][对象]*

我做了什么？

我在

sitemp.xml.js

import React from 'react';
import BlogSitemap from '../components/JobSitemap';
import NewSitemap from '../components/NewSitemap';
import {DOMAIN} from '../config';
import fs from "fs";



const Sitemap = () => {};

export const getServerSideProps = ({ res }) => {
    
const staticPages = fs
    .readdirSync("pages")
    .filter((staticPage) => {
      return ![
        "_app.js",
        "_document.js",
        "_error.js",
        "sitemap.xml.js",
      ].includes(staticPage);
    })
    .map((staticPagePath) => {
      return `${DOMAIN}/${staticPagePath}`;
    });

    //sitemap render
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${staticPages.join('')}
    ${<BlogSitemap />}
    ${<NewSitemap/>}
    </urlset>
  `;

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
};

export default Sitemap;

从“React”导入React；
从“../components/JobSitemap”导入博客站点地图；
从“../components/NewSitemap”导入NewSitemap；
从“../config”导入{DOMAIN}；
从“fs”导入fs；
const Sitemap=（）=>{}；
导出常量getServerSideProps=（{res}）=>{
常量staticPages=fs
.readdirSync（“页面”）
.filter（（静态页面）=>{
回来[
“_app.js”，
“_document.js”，
“_error.js”，
“sitemap.xml.js”，
]。包括（第页）；
})
.map（（staticPagePath）=>{
返回`${DOMAIN}/${staticPagePath}`；
});
//站点地图渲染
常数站点地图=`
${staticPages.join（“”）}
${}
${}
`;
res.setHeader（“内容类型”、“文本/xml”）；
res.write（站点地图）；
res.end（）；
返回{
道具：{}，
};
};
导出默认站点地图；

什么问题？
静态页面呈现得非常好。对于动态页面，我创建了单独的组件。这些动态组件显示为对象。简而言之，这种方法是行不通的。我想显示这些组件中的所有链接。我应该如何在站点地图中呈现它们。这些组件的代码如下所示
BlogSitemap.js

import React, { useState, useEffect } from 'react';
import {list} from '../actions/blog';
import {DOMAIN} from '../config'

const BlogSitemap=()=>{
    const [blogs, setBlogs] = useState([]);
    useEffect(() => {
        loadBlogs();
    }, []);

    const loadBlogs = () => {
        list().then(data => {
            if (data.error) {
                console.log(data.error);
            } else {
                setBlogs(data);
            }
        });
    };
    const BlogLinks=()=>{
        return blogs.map((blog,i)=>{
            `
            <url key=${i}>
                    <loc>${DOMAIN}/blogs/${blog.slug}</loc>
                    <lastmod>${blog.updatedAt}</lastmod>
                    <changefreq>daily</changefreq>
                    <priority>1.0</priority>
            </url>
            `
        })
    }
    return (
        <>
        {blogLinks()}
        </>
    )
}
export default BlogSitemap;

import React，{useState，useffect}来自“React”；
从“../actions/blog”导入{list}；
从“../config”导入{DOMAIN}
const BlogSitemap=（）=>{
const[blogs，setBlogs]=useState（[]）；
useffect（（）=>{
loadBlogs（）；
}, []);
const loadBlogs=（）=>{
list（）。然后（数据=>{
if（data.error）{
console.log（data.error）；
}否则{
日志（数据）；
}
});
};
常量BlogLinks=（）=>{
返回blogs.map（（blog，i）=>{
`
${DOMAIN}/blogs/${blog.slug}
${blog.updatedAt}
每日的
1
`
})
}
返回(
{blogLinks（）}
)
}
导出默认博客站点地图；

---

NewsSitemap组件与之类似。请告诉我如何正确使用它。

为什么要向站点地图XML添加组件？您希望向其中添加URL。我建议你再看一遍之前的教程。他正在使用graphql，但我没有。我只是想尝试一下。我只想在站点地图中自动添加动态生成的URL（比如带有slug的完整博客URL）。我也尝试了（）这个，但它只生成静态页面。请提供somw geniune解决方案