NextJS中getStaticProps()方法从未被调用问题求助

问题根源 #

getStaticProps 是 Next.js 专为pages 目录下的路由页面组件设计的服务端数据获取API，仅对pages文件夹下的页面默认导出生效，普通业务组件、子组件中导出的getStaticProps不会被框架触发，和你使用TypeScript、自定义_app.tsx没有关联。

解决方案1：将数据获取逻辑移到父页面 #

找到你引用<Projects />组件的父页面（一般是pages/目录下的路由文件，比如首页pages/index.tsx），在父页面中定义getStaticProps获取数据，再把数据通过props传递给Projects组件：
父页面示例代码：

import { GetStaticProps } from 'next'
import Projects from '../components/Projects'

type RawProject = {
    owner: string;
    repo: string;
    link: string;
    description: string;
    language: string;
    stars: number;
    forks: number;
}

export default function Home({projects} : {projects: RawProject[]}) {
  return (
    <div>
      {/* 其他页面内容 */}
      <Projects projects={projects} />
    </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
  };
}

调整Projects组件，去掉内部的getStaticProps，直接接收父组件传递的props即可：

import React from "react";

type RawProject = {
    owner: string;
    repo: string;
    link: string;
    description: string;
    language: string;
    stars: number;
    forks: number;
}

type ProjectsProps = {
  projects: RawProject[]
}

function Projects({projects}: ProjectsProps) {
    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">
                    {projects.map((project: RawProject) => (
                        <ProjectCard
                            key={project.repo}
                            title={project.repo}
                            language={project.language}
                            description={project.description}
                            imageUrl="https://dummyimage.com/720x400"
                            repoUrl={project.link}
                        />
                    ))}
                </div>
            </div>
        </section>
    );
}

export default Projects;

解决方案2：组件内客户端获取数据 #

如果你不想把数据逻辑放在父页面，可以选择在组件内用客户端方式获取数据，推荐用SWR或者React Query这类请求库，也可以直接用useEffect实现：

import React, { useEffect, useState } from "react";

type RawProject = {
    owner: string;
    repo: string;
    link: string;
    description: string;
    language: string;
    stars: number;
    forks: number;
}

function Projects() {
    const [projects, setProjects] = useState<RawProject[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const fetchProjects = async () => {
            const res = await fetch("https://gh-pinned-repos-5l2i19um3.vercel.app/?username=ythepaut");
            const data = await res.json()
            setProjects(data)
            setLoading(false)
        }
        fetchProjects()
    }, [])

    if(loading) return <div>加载中...</div>

    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">
                    {projects.map((project: RawProject) => (
                        <ProjectCard
                            key={project.repo}
                            title={project.repo}
                            language={project.language}
                            description={project.description}
                            imageUrl="https://dummyimage.com/720x400"
                            repoUrl={project.link}
                        />
                    ))}
                </div>
            </div>
        </section>
    );
}

export default Projects;

内容的提问来源于stack exchange，提问作者ythepaut