【Next.js】基礎から始めるNext.js API Routes【１６UserDetails Page１】

【１６UserDetails Page１】

YouTube: https://youtu.be/5cyvDxBLQU0

https://youtu.be/5cyvDxBLQU0

今回はユーザーの詳細ページの作成を行います。

「pages」フォルダ内に「users」フォルダを作成して、
「[id].tsx」ファイルを作成します。

pages/users/[id].tsx

import { useEffect, useState } from 'react'
import Layout from '../../components/Layout'
import { User } from '@prisma/client'
import UserCard from '../../components/UserCard'
import RegisterForm from '../../components/RegisterForm'
import { useRouter } from 'next/router'

export default function UserDetails() {
  const [user, setUser] = useState<Pick<User, 'id' | 'email' | 'name'>>()

  const router = useRouter()
  const { id } = router.query

  useEffect(() => {
    ;(async () => {
      if (router.isReady) {
        const res = await fetch(`/api/users/${id}`)
        const user = await res.json()
        setUser(user)
        console.log(user)
      }
    })()
  }, [id])

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl font-black font-sans p-4 mt-6">
          Register Form
        </h2>
        <RegisterForm />
        <h2 className="text-4xl font-black font-sans p-4 mt-6">User Details</h2>
        <div className="flex flex-wrap w-full justify-center items-center gap-3">
          {user && <UserCard user={user} />}
        </div>
      </div>
    </Layout>
  )
}

components/UserCard.tsx

import { Card } from 'flowbite-react'
import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import { User } from '@prisma/client'
import { FC } from 'react'
import Link from 'next/link'

interface Props {
  user: Pick<User, 'id' | 'email' | 'name'>
}

const UserCard: FC<Props> = ({ user }) => {
  return (
    <div className="w-60">
      <Card>
        <div className="flex flex-col items-center pb-10">
          <CheckBadgeIcon className="mb-3 h-24 w-24 rounded-full shadow-lg" />
          <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
            {user.name}
          </h5>
          <span className="text-sm text-gray-500 dark:text-gray-400">
            {user.email}
          </span>
          <div className="mt-4 flex space-x-3 lg:mt-6">
            <Link
              href={`/users/${user.id}`}
              className="inline-flex items-center rounded-lg bg-blue-700 py-2 px-4 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              User Details
            </Link>
          </div>
        </div>
      </Card>
    </div>
  )
}

export default UserCard