Next.js components目录下组件调用getStaticProps不生效如何解决？

问题根因 #

Next.js 规定 getStaticProps、getServerSideProps 这类服务端数据获取方法，仅对 pages 目录下的页面级组件生效，无法作用于普通自定义组件。你把 Galery 作为普通组件引入到 index.js 时，组件自带的 getStaticProps 不会自动执行，导致组件接收的 datas 参数为 undefined，调用 map 方法就会抛出报错。

调整方案 #

你需要把数据获取逻辑移到页面级组件，再通过 props 传递给 Galery 组件，具体步骤如下：

1. 改造 Galery.js 组件，删除自带的 getStaticProps 逻辑，仅保留组件渲染代码：

import styles from '../styles/galery.module.css'
import Image from 'next/image'
import Link from 'next/link'
import photo from '../public/01.png'

// 可选：给datas设置空数组默认值，避免参数缺失时报错
const Galery = ({ datas = [] }) => {
    return (
        <div className={styles.galeryPage}>
            <h1 className={styles.title}>Projetos</h1>
            <div className={styles.galery}>
                <div className={styles.categoryWrapper}>
                    <h4 className={styles.subTitle}>Escritório</h4>
                    <div className={styles.lineWrapper}>
                        <a className={styles.leftArrow}>&#10094;</a>
                        <div className={styles.line}>
                            {datas.map((data) => (
                                <div className={styles.imageBox} key={data.id}>
                                    <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                                    <div className={styles.linkContent}>
                                        <span className={styles.name}>{data.name}</span>
                                        <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <a className={styles.rightArrow}>&#10095;</a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Galery;

额外小优化：原代码把key属性写在了span标签上，应该移到map遍历的根节点（也就是imageBox的div上），避免React的key警告。

2. 在 pages/index.js 中添加 getStaticProps 逻辑，拿到数据后传递给 Galery 组件，示例代码如下：

import Galery from '../components/Galery' // 按你实际的组件路径调整

export const getStaticProps = async () => {
    const res = await fetch('https://my-json-server.typicode.com/Leterinho/PortfolioInteriorDesign/card');
    const datas = await res.json();
    return {
        props: { datas }
    }
}

const Home = ({ datas }) => {
  return (
    <div>
      {/* 你的首页其他代码 */}
      <Galery datas={datas} />
      {/* 你的首页其他代码 */}
    </div>
  )
}

export default Home

如果后续还有其他页面需要用到这个相册数据，你也可以把数据请求的逻辑抽成单独的公共函数，在需要用到的页面的getStaticProps里直接调用即可，不用重复写请求代码。

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