Nextjs×Prisma×SQLiteでreadする方法（その3）

./pages/post/[id].tsx

import prisma from "@utils/prisma"
import { Post } from "@utils/types"

export default function Content({post}:{post:Post}) {
    return(
        <div>
            <p>{post.id}</p>
            <p>{post.title}</p>
            <p>{post.content}</p>
        </div>
    )
}
export async function getServerSideProps({params}:{params:{id:number}}) {
    const post = await prisma.post.findUnique({
        where: {
            id: Number(params.id)
        }
    })
    return {
        props: {
            post: post 
        }
    }
}

前回取得したidからfindUniqueを使ってidと合致したpostを取得します。

export async function getServerSideProps({params}:{params:{id:number}}) {
    const post = await prisma.post.findUnique({
        where: {
            id: Number(params.id)
        }
    })
    return {
        props: {
            post: post 
        }
    }
}

取得したpostデータをhtmlで表示しています。

export default function Content({post}:{post:Post}) {
    return(
        <div>
            <p>{post.id}</p>
            <p>{post.title}</p>
            <p>{post.content}</p>
        </div>
    )
}

このままだと、毎回urlを叩かないといけないので、前々回の全データ取得画面にLinkを貼って、そこから飛べるようにします。

./pages/post/index.tsx

import prisma from "@utils/prisma"
import Link from "next/link"
import { Post } from "@utils/types"

export default function Home({posts}:{posts:Post[]}) {
  return(
    <ul>
      {
        posts.map((post:Post)=>(
          <li key={post.id}>
            <Link href={`/post/${post.id}`}>
              <p>{post.id}</p>
              <p>{post.title}</p>
              <p>{post.content}</p>
              <p>{post.published}</p>
            </Link>
          </li>
        ))
      }
    </ul>
  )
}

export async function getServerSideProps() {
  const posts = await prisma.post.findMany()
  return {
    props: {
      posts:posts,
    }
  }
}

NextjsのLinkを使ってリンクを貼ります。

import Link from "next/link"

/post/${post.id}とすることで、各idのデータへのリンクが貼れます。

      {
        posts.map((post:Post)=>(
          <li key={post.id}>
            <Link href={`/post/${post.id}`}>
              <p>{post.id}</p>
              <p>{post.title}</p>
              <p>{post.content}</p>
              <p>{post.published}</p>
            </Link>
          </li>
        ))
      }

これで1つのデータを取得することができました。

次回は、データの更新をしてみようと思います。