🙌
【Web Library】Nextjs13で覚える便利なライブラリ【#5Data Fetching2】
【#5Data Fetching2】
YouTube: https://youtu.be/rv9aANnx4cY
今回は前回取得したユーザーのデータを
コンポーネントを作成して表示を行います。
ui/PlaceholderUsers.tsx
'use client';
import { motion } from 'framer-motion';
const PlaceHolderUsers = ({ users }: { users: any }) => {
return (
<div className=" text-white">
<h1>Users Data</h1>
{users?.map((user: any, idx: number) => (
<motion.div
key={user.id}
initial={{ opacity: 0, x: 20 }}
whileInView={{
opacity: 1,
x: 0,
transition: { duration: 0.7, delay: idx * 0.4 },
}}
>
<h2>
{user.id}: {user.name}
</h2>
</motion.div>
))}
</div>
);
};
export default PlaceHolderUsers;
app/fetch/page.tsx
import PlaceHolderUsers from '@/ui/PlaceholderUsers';
async function getUsers() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
// Recommendation: handle errors
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data');
}
return res.json();
}
const Page = async () => {
const data = await getUsers();
console.log(data);
return (
<div>
<PlaceHolderUsers users={data} />
</div>
);
};
export default Page;
Discussion