project is using Nextjs app router (V14.0)
- fetching data from the endpoint (which works fine, already tested),
- passing it to a client component SearchFilter

code:

import SearchFilter from '@/components/primitives/SearchFilter';
import { Books } from '@prisma/client';

export const dynamic = 'force-dynamic';

const fetchData = async (): Promise<any> => {
    const response = await fetch(`${process.env.NEXTAUTH_URL}/api/books`, {
        next: { tags: ['books'] },
        cache: 'no-store',
    });
    const data = await response.json();
    const contents = data.data;
    console.log(`data from '/books' => `, contents.length);

    return contents;
};

export default async function Home() {
    const contents = await fetchData();

    return (
        <section className=" container mx-auto py-6">
            <SearchFilter books={contents} />
        </section>
    );
}

Error:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)