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

尝试将

URL

替换为 const

rootUrl

。

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];

现在让我看看是否有效

Answer 2

sitemap.ts

文件应位于

app

目录中。

你必须构建应用程序。

npm run build

然后运行

npm run start