not found pages

Author: markslorach

app/components/CountryCard.tsx

@@ -3,7 +3,7 @@ import { Country } from "../types";
 
 const CountryCard = ({ country }: { country: Country }) => {
   return (
-    <Link href={`/${country.cca3}`}>
+    <Link href={`/country/${country.cca3}`}>
       <article className="p-5 rounded-lg shadow-sm bg-white dark:bg-gray-700 space-y-7 border border-gray-300/50 dark:border-gray-500/50 md:hover:scale-[104%] transition-transform">
         <div className="aspect-video">
           <img

app/country/[cca3]/not-found.tsx

@@ -0,0 +1,12 @@
+import BackButton from "@/app/components/shared/BackButton";
+
+const NotFound = () => {
+  return (
+    <div className="px-4 md:container mt-10 space-y-10">
+      <BackButton />
+      <p>Country not found</p>
+    </div>
+  );
+};
+
+export default NotFound;

app/[cca3]/page.tsx app/country/[cca3]/page.tsx

@@ -4,21 +4,13 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Country } from "@/app/types";
 import BackButton from "@/app/components/shared/BackButton";
+import { notFound } from "next/navigation";
 
 const CountryPage = async ({ params }: { params: { cca3: string } }) => {
-  const { data, error } = await getCountry(params.cca3);
+  const { data } = await getCountry(params.cca3);
   const country = data as Country;
 
-  if (error) {
-    return (
-      <div className="container">
-        <div className="my-10">
-          <BackButton />
-        </div>
-        <p>{error}</p>
-      </div>
-    );
-  }
+  if (!country) notFound()
 
   const nativeName = country.name.nativeName
     ? Object.values(country.name.nativeName)[0]

app/not-found.tsx

@@ -0,0 +1,12 @@
+import BackButton from "./components/shared/BackButton";
+
+const NotFound = () => {
+  return (
+    <div className="px-4 md:container mt-10 space-y-10">
+      <BackButton />
+      <p>Page not found</p>
+    </div>
+  );
+};
+
+export default NotFound;