NextJS getStaticProps()从未调用
NextJS getStaticProps()从未调用
提问于 2021-09-06 13:21:05
我正在制作一个简单的网站，我想从API中获取数据并将其显示在我的组件上。问题是从来没有调用过getStaticProps()方法。
以下是组件的代码：
import React from "react";
import {GetStaticProps, InferGetStaticPropsType} from "next";
type RawProject = {
owner: string;
repo: string;
link: string;
description: string;
language: string;
stars: number;
forks: number;
}
function Projects({projects}: InferGetStaticPropsType<typeof getStaticProps>) {
console.log(projects);
return (
<section id="projects" className="bg-white p-6 lg:p-20">
<h1 className="sm:text-4xl text-2xl font-medium title-font mb-4 text-gray-900 pb-6 text-center">
Quelques de mes projets
</h1>
{/*
<div className="container px-5 mx-auto">
<div className="flex flex-wrap">
{rawProjects.map((project: RawProject) => (
<ProjectCard
title={project.repo}
language={project.language}
description={project.description}
imageUrl="https://dummyimage.com/720x400"
repoUrl={project.link}
/>
))}
</div>
</div>
*/}
</section>
);
}
export const getStaticProps: GetStaticProps = async () => {
console.log("getStaticProps()");
const res = await fetch("https://gh-pinned-repos-5l2i19um3.vercel.app/?username=ythepaut");
const projects: RawProject[] = await res.json();
return !projects ? {notFound: true} : {
props: {projects: projects},
revalidate: 3600
};
}
export default Projects;完整的代码可以在这里找到：https://github.com/ythepaut/webpage/tree/project-section
我不确定这个问题是由我使用类型记录，还是使用自定义_app.tsx造成的。
我尝试了以下解决方案：
但我不能让它起作用。
有人能帮帮我吗？提前谢谢。
回答 5
Stack Overflow用户
回答已采纳
发布于 2021-09-06 13:44:24
getStaticProps()只允许在页面中使用。
您目前的代码是：
import Hero from "../sections/Hero";
import Contact from "../sections/Contact";
import Projects from "../sections/Projects"; // you cannot call getStaticProps() in this componenet
function HomePage(): JSX.Element {
return (
<div className="bg-gray-50">
<Hero />
<Projects />
<Contact />
</div>
);
}
export default HomePage;相反，在getStaticProps()中调用index.tsx并将道具传递给组件，如下所示：
import Hero from "../sections/Hero";
import Contact from "../sections/Contact";
import Projects from "../sections/Projects";
function HomePage({data}): JSX.Element {
return (
<div className="bg-gray-50">
<Hero />
<Projects data={data} />
<Contact />
</div>
);
}
export const getStaticProps: GetStaticProps = async () => {
console.log("getStaticProps()");
const res = await fetch("https://gh-pinned-repos-5l2i19um3.vercel.app/?username=ythepaut");
const projects: RawProject[] = await res.json();
return !projects ? {notFound: true} : {
props: {projects: projects},
revalidate: 3600
};
}
export default HomePage;Stack Overflow用户
发布于 2021-09-06 13:44:28
Stack Overflow用户
发布于 2021-09-06 13:44:41
您只能在getInitialProps**，页面中使用 ** getServerSideProps**，** getStaticProps
我检查了您的项目，发现您的Project.tsx位于一个组件文件夹中，但是需要在pages文件夹中才能使这些函数工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69075289
复制相关文章
相似问题
腾讯云开发者
