Advanced UI: TypeScript, Next.js and Performance

// Server component: fetched and rendered on the server
type Course = { slug: string; title: string; weeks: number };

async function getCourses(): Promise<Course[]> {
  const res = await fetch('https://api.example.com/courses', {
    next: { revalidate: 3600 },
  });
  return res.json();
}

export default async function CoursesPage() {
  const courses = await getCourses();
  return (
    <ul>
      {courses.map((c) => (
        <li key={c.slug}>{c.title}, {c.weeks} weeks</li>
      ))}
    </ul>
  );
}