title: Next JS & Prisma TypeError: posts.map is not a function
body: <p>I'm working with Prisma in Next JS for the first timeand i've been getting this error.
  I'm importing data from prisma client in my dynamic page and i'm using simple code here.</p>
  <p>Here is my code:</p>
  <pre><code>import Head from 'next/head';
  import { Container, Div1, Div2, Div3 ,Button , Input ,Label } from '../../components/Header/HeaderStyles';
  import {useState} from 'react';
  import { PrismaClient } from '@prisma/client'
  
  const prisma = new PrismaClient()
  
  export default function Details({posts}) {
      return (
              &lt;div&gt;
                  {posts.map((post) =&gt; (
                      &lt;div key={post.id}&gt;
                          {post.id} {post.text}
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          )
  }
  
  export async function getServerSideProps(context) {
      const { id } = context.query 
      const data = await prisma.contact.findFirst({
          where: {
              id: Number(id)
          }
      })
      return{
          props:{
              posts:data,
          }}
  }
  </code></pre>