4: Data Fetching

app/layout.tsx

@@ -44,6 +44,9 @@ export default function RootLayout({
                 <li>
                   <Link href="/interactive">Interactive</Link>
                 </li>
+                <li>
+                  <Link href="/star-wars/people">Star Wars</Link>
+                </li>
                 <li>
                   <Link href="/danger-zone">Error</Link>
                 </li>

app/star-wars/layout.tsx

@@ -0,0 +1,15 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="outline-2 outline-sky-500 outline-dotted rounded-lg p-4 -mx-4">
+      <div className="p-4 -m-4 text-white sm:flex sm:items-center sm:justify-between mb-8">
+        <h2 className="text-base font-semibold leading-6 text-sky-500">
+          Star Wars
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-sm text-gray-500 italic">MtFBWY!</span>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}

app/star-wars/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="w-80 h-80 font-black text-xl mx-auto animate-spin shadow-md rounded-full flex justify-center items-center content-center">
+      Loading
+    </div>
+  );
+}

app/star-wars/not-found.tsx

@@ -0,0 +1,21 @@
+export const metadata = {
+  title: `Star War Not Found`,
+};
+
+export default function NotFound() {
+  return (
+    <>
+      <div className="border-b border-gray-200 pb-5 sm:flex sm:items-center sm:justify-between">
+        <h2 className="text-base font-semibold leading-6 text-gray-900">
+          <span className="font-mono">Star War Not Found</span>
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-sm text-gray-500 italic">
+            You have failed me for the last time!
+          </span>
+        </div>
+      </div>
+      <div className="h-8 rounded-lg shadow bg-sky-600" />
+    </>
+  );
+}

app/star-wars/people/[id]/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="w-60 h-60 font-black text-xl mx-auto animate-ping shadow-md rounded-full flex justify-center items-center content-center">
+      Loading
+    </div>
+  );
+}

app/star-wars/people/[id]/page.tsx

@@ -0,0 +1,46 @@
+import { type Person } from '../../types';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import sleep from '@/util/sleep';
+
+type Props = {
+  params: { id: string };
+};
+
+async function getPerson(id: string): Promise<Person> {
+  await sleep();
+  const res = await fetch(`https://swapi.dev/api/people/${id}`);
+
+  const json = await res.json();
+  return json;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const person = await getPerson(params.id);
+
+  return {
+    title: person.name,
+  };
+}
+
+export default async function Page({ params }: Props) {
+  const person = await getPerson(params.id);
+
+  if (!person.name) {
+    notFound();
+  }
+
+  return (
+    <div className="prose">
+      <h1>{person.name}</h1>
+      <dl>
+        <dt>Height</dt>
+        <dd>{person.height}</dd>
+        <dt>Mass</dt>
+        <dd>{person.mass}</dd>
+        <dt>Hair Color</dt>
+        <dd>{person.hair_color}</dd>
+      </dl>
+    </div>
+  );
+}

app/star-wars/people/page.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import sleep from '@/util/sleep';
+import { type Person } from '../types';
+
+async function getPeople(): Promise<Person[]> {
+  await sleep();
+  const res = await fetch('https://swapi.dev/api/people/');
+  const json = await res.json();
+  return json.results;
+}
+
+export const metadata = {
+  title: 'Star Wars People',
+};
+
+export default async function Page() {
+  const people = await getPeople();
+
+  return (
+    <div className="prose">
+      <h1>Star Wars People</h1>
+      <ul>
+        {people.map((person) => (
+          <li key={person.name}>
+            <Link
+              href={`star-wars/people/${person.url
+                .replace('https://swapi.dev/api/people/', '')
+                .replace('/', '')}`}
+            >
+              {person.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/star-wars/types.tsx

@@ -0,0 +1,18 @@
+export type Person = {
+  name: string;
+  height: string;
+  mass: string;
+  hair_color: string;
+  skin_color: string;
+  eye_color: string;
+  birth_year: string;
+  gender: string;
+  homeworld: string;
+  films: string[];
+  species: string[];
+  vehicles: string[];
+  starships: string[];
+  created: string;
+  edited: string;
+  url: string;
+};

util/sleep.tsx

@@ -0,0 +1,5 @@
+export default function sleep(ms = 2000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}