🙌
【Next.js】基礎から始めるNext.js API Routes【16UserDetails Page1】
【16UserDetails Page1】
YouTube: 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
Discussion