我尝试在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"
}
}
1条答案
按热度按时间yruzcnhs1#
您可以通过在页面中导出以下常量,指示Next以固定的时间间隔重新生成页面(并重新获取元数据):
你可以在Next.js文档中阅读其他重新验证策略-https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating