NextJS getStaticProps() 从未调用过答案

【问题标题】：NextJS getStaticProps() never calledNextJS getStaticProps() 从未调用过
【发布时间】：2021-11-03 14:06:22
【问题描述】：

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

我尝试了以下解决方案：

但我无法让它工作。

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

【问题讨论】：

标签： typescript next.js

【解决方案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;

而是在index.tsx 内调用getStaticProps() 并将道具传递给组件，如下所示::

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;

【讨论】：

【解决方案2】：

NextJs 中的数据获取方法（如 getStaticProps）仅在服务器上运行。因此它只在页面中起作用，而不是在常规的反应组件中

请查看他们的docs

普通组件中的数据获取，只能进行客户端渲染。 NextJS 推荐使用这个库SWR

根据他们的文档

SWR 是一种策略，首先从缓存中返回数据（陈旧），然后发送获取请求（重新验证），最后获取最新数据。

【讨论】：

【解决方案3】：

您只能在 Next.js 页面中使用 `getInitialProps`、`getServerSideProps`、`getStaticProps`

我检查了您的项目，发现您的 Project.tsx 位于组件文件夹中，但它必须位于 pages 文件夹中才能使这些功能正常工作。

【讨论】：

您只能在 Next.js 页面中使用 getInitialProps、getServerSideProps、getStaticProps

您只能在 Next.js 页面中使用 `getInitialProps`、`getServerSideProps`、`getStaticProps`