React Next.js：getServerProps 没有从 prisma 返回数组

Question

背景

在学习getServerProps之后，我尝试构建一个使用prisma从 postgres 返回一些数据的项目，但由于某种原因，当我尝试映射帖子数组（见下文）时，它返回未定义的数组。 Enevn 我相信我遵循了 Doc 页面上的语法规则，到目前为止还没有运气。 我被困了很长时间，我不知道为什么以及我做错了什么。 至少 VS 代码将帖子识别为数组，但 getServerProps 函数似乎永远不会运行。感谢您的阅读，让我知道您对此的想法。

我的问题总结

• 我不知道为什么在函数内部识别数组（ posts变量）时未定义。
• 我不知道为什么似乎没有调用 getServerProps

笔记：

Prisma 和 postgres 正在这个项目中工作

Posts.js

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>{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

模式棱镜

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id         Int        @id @default(autoincrement())
  title     String
  content   String
}

我得到的错误：

错误信息

棱镜工作室

文件结构

在学习了 StackOverflow 上的最佳答案之后

Answer 1

您不能在pages目录之外使用getServerSideProps 。 更改您的代码，以便 prisma 调用在您的页面内，并且使用 props 将帖子传递给Posts组件。 例如，如果您在pages/index.js中显示帖子：

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

function Home({ posts }) {
  return (
    <Posts posts={posts}/>
  );
}

export default Home

旁注：您不应该在每次调用getServerSideProps时都创建PrismaClient 。 创建一个 prisma.js 文件，在那里初始化它并在需要时重用它：

import { PrismaClient } from '@prisma/client'

let prisma

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient()
} else {
  // Ensure the prisma instance is re-used during hot-reloading
  // Otherwise, a new client will be created on every reload
  globalThis.prisma = globalThis.prisma || new PrismaClient()
  prisma = globalThis.prisma
}

export default prisma