reactjs - Next.js 在没有服务器的情况下生成站点地图

Question

我在 Next.js 中创建了一个博客。我在将所有页面导出到静态 HTML 文件后托管它。我添加到站点的第一个站点地图是使用 getServerSideProps() 并返回 XML 的站点地图。站点地图是从 Firebase 数据库生成的。每次构建项目时，我都想将站点地图导出为静态。这是我到目前为止所做的，这只是在 React 组件中渲染站点地图。

站点地图.xml.js

import { useState } from "react";

import { parseString } from "xml2js";

import { baseURL } from "../lib/constants";

export const getStaticProps = async () => {
  const { db } = await import("../lib/firebase");
  const result = await db.collection("root").doc("sitemap").get();

  const urls = result.data().urls;

  const pages = [];

  //loc, lastmod, changefreq, priority
  //NO FIRST AND LAST BRACKETS
  //loc;lastmod;changefreq;priority
  urls.forEach((dataString) => {
    const data = dataString.split(";");
    pages.push({
      loc: data[0],
      lastmod: data[1],
      changefreq: data[2],
      priority: data[3],
    });
  });

  return {
    props: {
      pages,
    },
    revalidate: 86400,
  };
};

export default function Sitemap({ pages }) {
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
    <br/>
    <br/>
      ${pages
        .map((page) => {
          return `
            &lt;url&gt;
            <br/>
            &emsp;&lt;loc&gt;${baseURL}/${page.loc}&lt;/loc&gt;
              <br/>
              &emsp;&lt;lastmod&gt;${page.lastmod}&lt;/lastmod&gt;
              <br/>
              &emsp;&lt;changefreq&gt;${page.changefreq}&lt;/changefreq&gt;
              <br/>
              &emsp;&lt;priority&gt;${page.priority}&lt;/priority&gt;
              <br/>
            &lt;/url&gt;
            <br/>
            
          `;
        })
        .join("")}
        <br/>
    &lt;/urlset&gt;
  `;

  const [parsedXML, setParsedXML] = useState(null);

  parseString(sitemap, (error, result) => {
    console.dir(result);
    //setParsedXML(result);
  });

  return (
    <div
      dangerouslySetInnerHTML={{
        __html: sitemap,
      }}
    >
    </div>
  );
}

我想将此站点地图作为适当的 XML 文件。请指教。

PS：将站点地图作为 XML 文件还是仅在 React 组件中显示所有 URL 有区别吗？

谢谢 ：）：）：）

标签： reactjsnext.js