postgreSQLからデータを取得する

app/api/db/route.ts

@@ -0,0 +1,51 @@
+import { PrismaClient } from '@prisma/client'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(_request: NextRequest, _response: NextResponse) {
+  try {
+    const prisma = new PrismaClient()
+    const data = await prisma.skills.findMany()
+    return NextResponse.json({ data }, { status: 200 })
+  } catch (error) {
+    NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
+
+async function CREATE(request: NextApiRequest, response: NextApiResponse) {
+  const { skillType, skillName } = JSON.parse(request.body)
+  try {
+    const prisma = new PrismaClient()
+    // TODO 生成する値は仮埋め
+    const data = await prisma.skills.create({
+      select: {
+        skilltype: true,
+        skillname: true
+      },
+      data: {
+        skilltype: '',
+        skillname: ''
+      }
+    })
+    return response.status(200).json({ data })
+  } catch (error) {
+    response.status(500).json({ error })
+  }
+}
+
+async function DELETE(request: NextApiRequest, response: NextApiResponse) {
+  const { id } = JSON.parse(request.body)
+
+  try {
+    const prisma = new PrismaClient()
+    const data = await prisma.skills.delete({
+      where: {
+        id: parseInt(id, 10)
+      }
+    })
+
+    return response.status(200).json({ data })
+  } catch (error) {
+    return response.status(500).json({ error })
+  }
+}

app/skills/page.tsx

@@ -19,6 +19,7 @@ import {
   Radar,
   RadarChart
 } from 'recharts'
+import { useEffect, useState } from 'react'
 
 const profile = {
   name: 'Yoshi Oka'
@@ -119,6 +120,22 @@ const GridRechartItem = styled(Grid)({
 })
 
 const Home = () => {
+  const [frontend, setFrontend] = useState(null)
+  console.log(process.env.NEXT_PUBLIC_API_URL)
+  useEffect(() => {
+    ;(async () => {
+      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/db`)
+      if (!response.ok) {
+        throw new Error('Network response was not ok')
+      }
+      console.log(response)
+      const data = await response.json()
+      setFrontend(data)
+    })()
+  }, [])
+
+  console.log(frontend)
+
   return (
     <Box maxWidth={'80ch'} mr="auto" ml="auto">
       <ResponsiveAppBar />

package.json

@@ -23,6 +23,9 @@
     "recharts": "^2.12.0",
     "rss": "^1.2.2"
   },
+  "prisma": {
+    "schema": "prisma/schema.prisma"
+  },
   "prettier": {
     "arrowParens": "always",
     "singleQuote": true,