Next.js runs without issues in development mode (npm run dev), but after building (npm run build) and starting (npm run start), an issue occurs

Question

My code

import { Metadata } from 'next';
import Markdown from 'react-markdown';
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import { apiLink } from '@/config/apiLink';
import { notFound } from 'next/navigation';

export const dynamic = "force-dynamic";

async function getData() {
    try {
        const response = await fetch(`${apiLink}/api_v1/roadmap/`);

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const posts = await response.json();
        if (!posts || posts.length === 0) {
            notFound(); 
        }

        return posts;
    } catch (error) {
        return null; 
    }
}

export async function generateMetadata(): Promise<Metadata> {
    const res = await getData();

    if (!res) {
        return {
            title: "RoadMap",
            description: "No roadmap available"
        };
    }

    return {
        title: "RoadMap",
        description: res[0]?.description || "No roadmap available"
    };
}

export default async function RoadMapPage() {
    const data = await getData();

    if (!data) {
        notFound(); 
    }

    return (
        <div className="flex flex-col justify-start sm:mx-10">
            <div className="w-full my-5 p-6 bg-white shadow-lg rounded-md overflow-hidden border min-h-screen flex flex-col">
                <div className="flex-1">
                    {data?.[0]?.content ? (
                        <Markdown
                            className="markdown"
                            remarkPlugins={[remarkGfm]}
                            rehypePlugins={[rehypeRaw]}
                            remarkRehypeOptions={{ passThrough: ['link'] }}
                        >
                            {data[0].content}
                        </Markdown>
                    ) : (
                        <p>No roadmap content available.</p>
                    )}
                </div>
            </div>
        </div>
    );
}

I created a simple REST API that sends two text fields to my Next.js application. In development mode (npm run dev), everything works fine. However, after building (npm run build) and starting (npm run start), I encounter the following error:

TypeError: fetch failed
    at node:internal/deps/undici/undici:13484:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async c (F:\codefrontend\.next\server\app\news\[newstitle]\page.js:1:2794)
    at async u (F:\code\frontend\.next\server\app\news\[newstitle]\page.js:1:3229) {
  digest: '2021866546',
  [cause]: Error: connect ECONNREFUSED ::1:8000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1615:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 8000
  }
}

Im not sure what is causing the issue to be honest i also dont really understand what went wrong.

At first, I thought the issue was related to Turbo, so I switched to Webpack, but the problem persists.

What I'm trying to achieve is a dynamically generated static page that occasionally updates its data while still being statically generated for SEO purposes.