typescript - NextJs 13 的动态站点地图

Question

我正在按照本指南为 NextJs 13.4.6 https://claritydev.net/blog/nextjs-dynamic-sitemap-pages-app-directory 创建动态站点地图

我遇到的问题是文章底部的代码与 NextJS 13.3 及更高版本的站点地图有关 - 但是，它不起作用。

这是我的站点地图的代码，用于根据我的路线和来自 cms 的博客文章返回 URL 对象(我从我们的 API 获取博客文章数据)。

interface ApiResponseEntries {
  data: TransformedEntry[];
  status: number;
}

// This will change when we have a production URL
const rootUrl = "http://localhost:3000";

export default async function sitemap() {
  try {
    const url = "/api/routes/contentful/entries";

    const response: AxiosResponse<ApiResponseEntries> = await axios.get(url);

    const blogPostEntries: TransformedEntry[] = response.data.map(
      (entry: TransformedEntry) => {
        return entry.contentType === "blogPost";
      }
    );

    const blogPosts = blogPostEntries.map((entry: TransformedEntry) => ({
      url: `${URL}/blog/${entry.id}`,
      lastModified: entry.updatedAt,
    }));

    const routes = ["/", "/blog"].map((route) => ({
      url: `${URL}${route}`,
      lastModified: new Date().toISOString(),
    }));

    return [...routes, ...blogPosts];
  } catch (error) {
    console.error("Error", error);
  }
}

问题是，除非我读错了这篇文章，否则我不明白如果我转到 localhost:3000/sitemap.xml ，这将如何为 Google 提供站点地图，那么只有一个 404 页面...这是有道理的，因为我从来没有任何地方定义任何 XML 内容。

有谁知道如何让较新版本的 NextJs13 获取此动态站点地图以返回该 url 端点？或者可以举例说明如何完成此操作。

谢谢!

Answer 1

尝试用 const rootUrl 替换 URL。

const rootUrl = "http://localhost:3000"

const blogPosts = blogPostEntries.map((entry: TransformedEntry) => ({
      url: `${rootUrl}/blog/${entry.id}`,
      lastModified: entry.updatedAt,
    }))

const routes = ["/", "/blog"].map((route) => ({
      url: `${rootUrl}${route}`,
      lastModified: new Date().toISOString(),
    }));

return [...routes, ...blogPosts];

如果有效的话现在就告诉我