next.js 下一页JS动态元数据

2j4z5cfb  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(129)

我尝试在NextJS 13动态更新元数据。为此,我有一个rest API作为后端,它发送像title, description, keywords, images etc这样的元数据。我的目标是,通过这种方法,我可以随时更新网站的元数据。但问题是,在应用此之后,它在我的本地服务器上工作正常,但一旦我将其托管到vercel服务器上,它就不能像我想要的那样工作了。它获取了一次数据,但当我在API中更改数据时,它不会在网站中更新。
下面是我所做的代码示例,

  • about-us/page.tsx中使用此函数
export async function generateMetadata(): Promise<Metadata> {
    const meta = await getMetaApi("about");
    return {
        title: `${meta?.data?.page_name} | Legato Designs `,
        generator: "Legato Designs",
        applicationName: "Legato Designs",
        keywords: meta?.data?.meta_keywords?.split(","),
        authors: [{name: 'Golden Infotech Ltd'}, {name: 'Golden Infotech Ltd', url: 'https://goldeninfotech.com.bd/'}],
        creator: 'Golden Infotech Ltd',
        publisher: 'Legato Designs',
        metadataBase: new URL("https://legatodesigns.com/"),
        alternates: {
            canonical: '/',
            languages: {
                'en-US': '/en-US',
                'de-DE': '/de-DE',
            },
        },
        openGraph: {
            title: meta?.data?.og_title,
            description: meta?.data?.og_description,
            url: 'https://legatodesigns.com/',
            siteName: 'Legato Designs',
            images: [
                {
                    url: `${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.og_image}`,
                    width: 800,
                    height: 600,
                },
                {
                    url: `${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.meta_image}`,
                    width: 1800,
                    height: 1600,
                    alt: 'Legato Designs',
                },
            ],
            locale: 'en-US',
            type: 'website',
        },
        twitter: {
            card: 'summary_large_image',
            title: meta?.data?.og_title,
            description: meta?.data?.og_description,
            creator: '@goldeninfotech',
            images: [`${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.og_image}`],
        },
        robots: {
            index: true,
            follow: true,
            nocache: true,
            googleBot: {
                index: true,
                follow: false,
                noimageindex: true,
                'max-video-preview': -1,
                'max-image-preview': 'large',
                'max-snippet': -1,
            },
        },
        icons: {
            icon: '/legato_fav.png',
            shortcut: '/legato_fav.png',
            apple: '/legato_fav.png',
            other: {
                rel: '/legato_fav',
                url: '/legato_fav.png',
            },
        },
        manifest: 'https://nextjs.org/manifest.json',

    };
}
  • getMetaApi函数代码
export const getMetaApi = async (page) => {
    try {
        const response = await Axios.get(`get-meta/${page}`);
        return response.data;
    } catch (err) {
        console.log(err)
    }
}
  • 下面是API的响应
{
"status": true,
"data": {
"id": 1,
"page_name": "Home",
"slug": "home",
"meta_title": "Legato Designs | Home",
"meta_keywords": "legato design, best furniture mart",
"meta_description": "Shop high-quality furniture at Legato Designs. Our wide selection of modern and contemporary furniture will elevate your home decor.",
"meta_image": null,
"og_title": "Legato Designs Home",
"og_description": "Shop high-quality furniture at Legato Designs. Our wide selection of modern and contemporary furniture will elevate your home decor.",
"og_image": "uploads/collection/meta/6463bb1520020.20230516.jpg",
"created_at": "2023-04-16 12:47:31",
"updated_at": "2023-05-16 23:19:17"
}
}
yruzcnhs

yruzcnhs1#

您可以通过在页面中导出以下常量,指示Next以固定的时间间隔重新生成页面(并重新获取元数据):

// re-validate every 10 minutes
export const revalidate = 600;

你可以在Next.js文档中阅读其他重新验证策略-https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating

相关问题