post_5

page.tsx

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Page() {
  const todos = await getData();

  return (
    <>
      <h1>All the Todos 📝</h1>

      {todos.map((todo: Todo) => (
        <div key={todo.id}>
          <p>
            {todo.id} : {todo.title}
          </p>
        </div>
      ))}
    </>
  );
}