Next.js getServerSideProps通过Prisma返回posts数组为undefined问题

getServerSideProps未执行、组件接收posts为undefined由两个问题导致：

• 核心原因：Next.js 中getServerSideProps仅会在pages目录下的路由页面组件中被自动调用。从贴出的项目结构来看，Posts.js存放在components公共组件目录，Next.js不会对非页面组件执行数据获取逻辑，自然不会传递posts参数。
• 次要问题：组件内数组遍历的写法无返回值。当前posts.map的回调函数用大括号包裹JSX，没有写return语句，即便拿到数据也无法正常渲染内容。

1. 调整文件位置 #

如果要让getServerSideProps生效，需要把Posts.js移动到pages目录下：

• 若希望通过/posts路径访问该页面，直接将文件放在pages/posts.js路径
• 若希望作为首页展示，将文件重命名为pages/index.js

如果Posts是需要复用的公共组件，不要在组件内部写getServerSideProps，要把数据获取逻辑写在引用该组件的页面级文件中，拿到数据后再通过props传给Posts组件。

2. 修正遍历渲染逻辑 #

修改map回调的写法，保证JSX被正确返回，同时给列表项加上唯一key避免React告警，修正后的完整代码如下：

import { PrismaClient } from '@prisma/client'
function Posts({ posts }) {
  return (
    <div>
      <h1 className="text-4xl block text-gray-500 font-bold pt-5 text-center">
        Posts
      </h1>
      <div>
        {posts.map((post) => (
          <h3 key={post.id}>{post.title}</h3>
        ))}
      </div>
    </div>
  );
}

export const getServerSideProps = async () => {
  const prisma = new PrismaClient()
  const posts = await prisma.post.findMany()
  return { props: { posts } }
}

export default Posts

3. 优化建议（可选） #

不建议每次请求都新建PrismaClient实例，开发环境热更新会反复创建数据库连接触发告警，可以抽离全局复用的Prisma实例：
在项目lib目录下新建prisma.js文件，写入以下代码：

import { PrismaClient } from '@prisma/client'
const prisma = global.prisma || new PrismaClient()
if (process.env.NODE_ENV !== 'production') global.prisma = prisma
export default prisma

后续在页面中直接引入该实例使用即可，无需重复实例化PrismaClient。

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