I am following this guide to create a dynamic sitemap for NextJs 13.4.6 https://claritydev.net/blog/nextjs-dynamic-sitemap-pages-app-directory
我正在按照这个指南为NextJs 13.4.6 https://claritydev.net/blog/nextjs-dynamic-sitemap-pages-app-directory创建一个动态站点地图
The issue I am having is the bottom of the article is where it has the code to do with a sitemap for NextJS versions of 13.3 and above - however, it does not work.
我在文章的底部遇到的问题是,它的代码与NextJS 13.3及以上版本的Sitemap有关--然而,它不起作用。
This is the code for my sitemap to return an object of URLs based on my routes and blog posts from cms (I am getting the blog post data from our API).
这是我的网站地图的代码,根据我的路线和来自cms的博客帖子(我正在从我们的API获取博客帖子数据)返回URL对象。
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);
}
}
The issue is unless I read the article wrong I do not understand how this is providing a sitemap for Google if I go to localhost:3000/sitemap.xml there is just a 404 page... which makes sense as I never anywhere defined anything being XML.
问题是,除非我读错了,否则我不明白这怎么会为Google提供一个站点地图,如果我转到Localhost:3000/sitemap.xml,那里只有一个404页面……这是有道理的,因为我从来没有在任何地方定义过任何XML。
Does anyone know how for the newer version of NextJs13 to get this dynamic sitemap to return on that url endpoint? or can point to examples of how it's been done.
有人知道较新版本的NextJs13如何让这个动态站点地图在URL端点上返回吗?或者可以举出如何做到这一点的例子。
Thanks!
谢谢!
更多回答
I suggest you read the official documentation on this matter, rather than a 3rd party article.
我建议你阅读关于这件事的官方文档,而不是第三方文章。
Nextjs 13 documentation tells us how to build sitemap dynamically at "BUILD" time but it does not tell it how to revalidate the sitemap.xml when we need to. So the question is how do we rebuild or the sitemap when we add a new blog post without having to rebuild the website.
Nextjs13文档告诉我们如何在“构建”时动态构建Sitemap,但没有告诉我们在需要时如何重新验证Sitemap.xml。所以问题是,当我们添加一个新的博客帖子时,我们如何在不重建网站的情况下重建网站地图。
优秀答案推荐
Try replacing URL
with the const rootUrl
.
尝试将URL替换为常量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];
let me now if it works
如果管用,现在就让我来
sitemap.ts
file should be in the app
directory.
Sitemap.ts文件应该位于app目录中。
Then you have to build the app.
然后你必须构建这款应用程序。
npm run build
and then run
然后跑
npm run start
更多回答
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
正如它目前所写的,你的答案并不清楚。请编辑以添加更多详细信息,以帮助其他人了解这是如何解决提出的问题的。你可以在帮助中心找到更多关于如何写出好答案的信息。
Were you able to solve this problem? Please share your solution. Thanks
你能解决这个问题吗?请分享您的解决方案。谢谢
我是一名优秀的程序员,十分优秀!