如何解决NextJS 标头 - 内容数据
我想在我的标题菜单“学习”中显示“最近的文章”,但由于我使用的是 NextJS,因此无法在自定义组件中使用 getStaticProps。如何将我的 GraphQL 查询从我的文章页面传递到我的自定义组件?
谁能帮我举一个在页面上使用 getStaticProps 并传递给自定义组件的示例?
这是我的articles.jsx 文件的getStaticProps 部分,导入在顶部:
import {
getPaginatedArticles,getPaginatedCases,getArticles,getRecentArticles,} from "../utils/contentful";
export async function getStaticProps() {
const articles = await getPaginatedArticles();
const cases = await getPaginatedCases();
const categories = await getArticles();
const recentArticles = await getRecentArticles();
return {
props: {
articles: articles.articleCollection.items,cases: cases.caseCollection.items,categories: categories.articleCollection.items,recentArticles: recentArticles.articleCollection.items,},};
}
export async function getRecentArticles() {
const recentArticlesQuery = gql`
{
articleCollection(order: date_DESC,limit: 3) {
items {
title
slug
excerpt
date
contentfulMetadata {
tags {
name
id
}
}
featuredImage {
title
url
width
height
}
author {
name
photo {
fileName
url
width
height
}
title
twitterProfile
linkedInProfile
slug
}
}
}
}
`;
return graphQLClient.request(recentArticlesQuery);
}
正如开头提到的,如果我在文章页面中使用它,它会起作用,但我想在我的标题中使用它。
export default function Header() {
return (
<div>
<h3>Recent Posts</h3>
<ul>{recentPosts.map((post) => (
<li
key={post.id}>
<a href={post.href}>
{post.name}
</a>
</li>
))}
</ul>
</div>
)
}
如何将数据从articles.jsx 文件引入我的自定义标题组件?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。