NextJS getStaticProps() 从未被调用

Question

我正在制作一个简单的网站，我想从 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

我尝试了以下解决方案：

• https://github.com/vercel/next.js/issues/11328
• 如何使 Next.js getStaticProps 与打字稿一起使用

但我无法让它发挥作用。

有人可以帮我吗？提前致谢。

Answer 1

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并将 props 传递给组件，如下所示：:

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;