如何在 Nextjs 14 中制作动态站点地图？

Question

我在 nextjs 14 中为我的博客文章网站提供了这个动态站点地图的代码片段。这在开发中工作得很好，但在构建或生产中，即使我等待 60 秒，也不会生成动态站点地图。我还注意到，当我使用此站点地图代码片段部署项目时，构建日志始终显示站点地图是“预渲染静态”。我该如何使我的站点地图动态并更新一段时间？由于这个原因，我已经在这个项目上坚持了三天了。如果有人知道一两个答案，请评论出来。谢谢你

import { CategoryInterface, PostInterface } from "@/commons/types"
import { getAllCategories, getAllPosts } from "@/lib/get-requests"
import { MetadataRoute } from "next"

export const revalidate = 60

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    const baseUrl = "https://www.mywebsite.com"

    const { categories } = await getAllCategories()
    const { posts } = await getAllPosts()

    const categoryUrls = categories
        ?.filter((category: CategoryInterface) => category.isPublished)
        ?.map((category: CategoryInterface) => ({
            url: category.liveUrl,
            lastmodified: new Date(),
            priority: 1,
            changeFrequency: "daily",
        }))

    const postUrls = posts?.filter((post: PostInterface) => post.isPublished)?.map((post: PostInterface) => ({
        url: post.liveUrl,
        lastmodified: post.updatedAt,
        priority: 1,
        changeFrequency: "daily",
    }))

    return [
        { 
            url: baseUrl,
            lastmodified: new Date(),
            priority: 1,
            changeFrequency: "daily",
        },
        { 
            url: `${baseUrl}/blogs`,
            lastmodified: new Date(),
            priority: 1,
            changeFrequency: "daily",
        },

        ...postUrls,
        ...categoryUrls,
    ]
}

我已阅读“动态”站点地图的 nextjs 文档，但它不是动态生成的。我也尝试了不同的方法，例如：

import { CategoryInterface, PostInterface } from '@/commons/types';
import { getAllCategories, getAllPosts } from '@/lib/get-requests';
import { GetServerSideProps } from 'next'

export default function Sitemap() {
    return null
}

export const getServerSideProps: GetServerSideProps<{}> = async ({req, res}) => {
    res.setHeader(
        'Content-Type', 'text/xml',
    );
    const xml = await generateSitemap()

    res.write(xml);
    res.end()
    return {
        props: {},
    }
}

async function generateSitemap(): Promise<string> {
    const baseUrl = "https://www.mywebsite.com"
    
    const { categories } = await getAllCategories()
    const { posts } = await getAllPosts()

    return `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
            <loc>${baseUrl}</loc>
            <lastmod>${new Date()}</lastmod>
            <changefreq>daily</changefreq>
            <priority>1</priority>
        </url>
        <url>
            <loc>${baseUrl}/blogs</loc>
            <lastmod>${new Date()}</lastmod>
            <changefreq>daily</changefreq>
            <priority>1</priority>
        </url>
        ${posts?.filter((post: PostInterface) => post.isPublished)?.map((post: PostInterface) => {
            return `
            <url>
                <loc>${post.liveUrl}/blogs</loc>
                <lastmod>${post.updatedAt}</lastmod>
                <changefreq>daily</changefreq>
                <priority>1</priority>
            </url>
            `
        }).join('')}

        ${categories?.filter((category: CategoryInterface) => category.isPublished)?.map((category: CategoryInterface) => {
            return `
            <url>
                <loc>${category.liveUrl}/blogs</loc>
                <lastmod>${category.updatedAt}</lastmod>
                <changefreq>daily</changefreq>
                <priority>1</priority>
            </url>
            `
        }).join('')}
    </urlset>
    `
}

但是这个并没有在我的开发中体现出来。所以我没有使用这个。

Answer 1

您使用应用程序路由器吗？尝试添加它以使页面动态。

导出常量动态='力动态'