app/api/services/[id]/route.ts

@@ -1,6 +1,9 @@
 const BACKEND_URL = process.env.BACKEND_URL;
 
-export async function GET({ params }: { params: Promise<{ id: string }> }) {
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
   const { id } = await params;
   const response = await fetch(`${BACKEND_URL}/services/${id}`);
 
@@ -15,7 +18,10 @@ export async function GET({ params }: { params: Promise<{ id: string }> }) {
   return Response.json(data);
 }
 
-export async function DELETE({ params }: { params: Promise<{ id: string }> }) {
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
   const { id } = await params;
   const response = await fetch(`${BACKEND_URL}/services/${id}`, {
     method: "DELETE",

app/api/services/route.ts

@@ -1,8 +1,6 @@
 const BACKEND_URL = process.env.BACKEND_URL;
 
 export async function GET() {
-  console.log("Made it to the GET SERVICES ROUTE!");
-
   const response = await fetch(`${BACKEND_URL}/services/all`);
 
   if (!response.ok) {

components/layout/Header.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
 import Hyperlink from "@/components/ui/Hyperlink";
 import { getServices } from "@/lib/api/helpers/services";
 import { Service } from "@/lib/api/types";
@@ -40,11 +44,19 @@ const defaultServices: Service[] = [
   },
 ];
 
-export default async function Header() {
+export default function Header() {
-  let services = await getServices();
+  const [services, setServices] = useState<Service[]>(defaultServices);
-  if (services.length < 1) {
+  useEffect(() => {
-    services = defaultServices;
+    getServices()
-  }
+      .then((services) => {
+        if (services.length > 0) {
+          setServices(services);
+        }
+      })
+      .catch(() => {
+        // Keep default services if the backend is not reached :C
+      });
+  }, []);
   return (
     <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
       <nav className="flex items-center justify-around w-full h-full px-6 py-4">