🙌

【Web Library】Nextjs13で覚える便利なライブラリ【#5Data Fetching2】

2023/02/27に公開

【#5Data Fetching2】

YouTube: https://youtu.be/rv9aANnx4cY

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