✨ feat: update Docker setup and enhance error handling (#19)

.github/workflows/main.yml

@@ -38,6 +38,7 @@ jobs:
           CONTAINER_NAME="nextjs-$DEPLOY_ENV"
           IMAGE_NAME="my-nextjs-app:$DEPLOY_ENV"
           NEW_CONTAINER_NAME="$CONTAINER_NAME-new"
+          NETWORK_NAME="big-bear-ghost_ghost-network"
 
           # Remove existing temporary container, if any
           if [ "$(docker ps -aq -f name=$NEW_CONTAINER_NAME)" ]; then
@@ -46,8 +47,9 @@ jobs:
           fi
 
           # Start the new container on a temporary internal port
-          docker run -d --name "$NEW_CONTAINER_NAME" -p 40000:3000 \
+          docker run -d --name "$NEW_CONTAINER_NAME" --network $NETWORK_NAME -p 40000:3000 \
             -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
+            -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
             $IMAGE_NAME
 
           # Wait to ensure the new container is running
@@ -66,8 +68,9 @@ jobs:
             docker rm "$NEW_CONTAINER_NAME" || true
 
             # Start the container with the desired name and port
-            docker run -d --name "$CONTAINER_NAME" -p $PORT:3000 \
+            docker run -d --name "$CONTAINER_NAME" --network $NETWORK_NAME -p $PORT:3000 \
               -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
+              -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
               $IMAGE_NAME
           else
             echo "New container failed to start."

app/Projects/[slug]/page.tsx

@@ -8,6 +8,8 @@ import {
 } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import Link from "next/link";
+
 import Footer_Back from "@/app/components/Footer_Back";
 import Header from "@/app/components/Header";
 import Image from "next/image";
@@ -33,6 +35,7 @@ const ProjectDetails = () => {
   const pathname = usePathname();
   const [project, setProject] = useState<Project | null>(null);
   const [isVisible, setIsVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setTimeout(() => {
@@ -53,7 +56,12 @@ const ProjectDetails = () => {
     } else {
       // Fetch project data based on slug from URL
       const slug = params.slug as string;
+      try {
         fetchProjectData(slug);
+      } catch (error) {
+        console.log(error);
+        setError("Failed to fetch project data");
+      }
     }
   }, [searchParams, router, params, pathname]);
 
@@ -64,12 +72,41 @@ const ProjectDetails = () => {
         throw new Error("Failed to fetch project data");
       }
       const projectData = (await response.json()) as { posts: Project[] };
+      if (projectData.posts.length === 0) {
+        throw new Error("Project not found");
+      }
       setProject(projectData.posts[0]);
     } catch (error) {
       console.error("Failed to fetch project data:", error);
+      setError("Project not found");
     }
   };
 
+  if (error) {
+    return (
+      <div className="min-h-screen flex flex-col bg-radiant">
+        <Header />
+        <div className="flex-grow flex items-center justify-center">
+          <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+            <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+              404
+            </h1>
+            <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+              {error}
+            </p>
+            <Link
+              href="/"
+              className="mt-6 inline-block text-blue-500 hover:underline"
+            >
+              Go Back Home
+            </Link>
+          </div>
+        </div>
+        <Footer_Back />
+      </div>
+    );
+  }
+
   if (!project) {
     return (
       <div className="min-h-screen flex flex-col bg-radiant">

app/api/fetchAllProjects/route.tsx

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://192.168.179.31:2368";
+const GHOST_API_URL = "http://big-bear-ghost:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET() {