Next.js Discord

Discord Forum

build error -- file structure

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
When i run npm run build there is error called

Generating static pages (1/10) [= ]TypeError: fetch failed
at node:internal/deps/undici/undici:12618:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async J (/Users/taner/Documents/signal-clone/.next/server/chunks/705.js:1:16298) {
cause: Error: connect ECONNREFUSED ::1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
errno: -61,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 3000
},
digest: '854037414'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: fetch failed
at node:internal/deps/undici/undici:12618:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async J (/Users/taner/Documents/signal-clone/.next/server/chunks/705.js:1:16298)
✓ Generating static pages (10/10)

Export encountered errors on following paths:
/(project)/page: /


I couldnt solve this issue. Could you please help me
Answered by joulev
this error is not due to next/image, but due to you fetching your own route handlers which is a horribly bad idea. see here: https://nextjs-faq.com/fetch-api-in-rsc
View full answer

22 Replies

Transvaal lionOP
import Image from "next/image";

export default function Home() {
    return (
        <div className="flex flex-col items-center justify-center w-full h-full">
            <Image
                className="w-28 h-auto"
                sizes="100vw"
                width={0}
                height={0}
                src={"/signal-logo.svg"}
                alt="Signal Logo"
            />
            <h1 className="text-4xl font-semibold mt-8 text-center text-primary">
                Welcome to Signal
            </h1>
        </div>
    );
}


page.tsx
Barbary Lion
Do you still get an error when the Image component is removed. Just to check if the error has anything todo with image generation/caching
Widht and Height can also not be null if you are not using "fill" as a image prop. And I personally never use the sizes prop
now i will try again by deleting .next and node_modules
Transvaal lionOP
import SignalLogo from "@/components/signal-logo";
export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";
export default function HomePage() {
    return (
        <div className="flex flex-col items-center justify-center w-full h-full">
            <SignalLogo className="w-28 h-auto" />
            <h1 className="text-4xl font-semibold mt-8 text-center text-primary">
                Welcome to Signal
            </h1>
        </div>
    );
}


I add

export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";

and fixed but i am considering this is a right way to fix the problem
Barbary Lion
Read this
Answer
@joulev this error is not due to next/image, but due to you fetching your own route handlers which is a horribly bad idea. see here: <https://nextjs-faq.com/fetch-api-in-rsc>
Transvaal lionOP
Thenn you mean do not fetch data by using route handlers in server component. But i can use it in swr or others, right?
but the error is coming from (project)/page.tsx
why isnt it coming from chat/[id]/page.tsx
Transvaal lionOP
ok i got it. i am trying it now thanks a lot
btw thank you for considering my issue @Barbary Lion
@joulev yes, you can use it in client components
Transvaal lionOP
Yesss! It works. Thank you again
@joulev this error is not due to next/image, but due to you fetching your own route handlers which is a horribly bad idea. see here: <https://nextjs-faq.com/fetch-api-in-rsc>
Gouty oak gall
got the same issue mentioned in this forum, and the answer on your site solved it.
It makes complete sense for simple uses like that, but, if I want to use same database call logic in multiple places, where should I put the db call functions then, if not in api routes? (new to web development)
For discord bots, I noticed some people create "services" directory and put db functions there, so they can easily import and reuse them.
Would this apply to nextjs as well, or are there other practices?
Then you can use them directly in server components and write api routes based on them at the same time
Gouty oak gall
Alright, great. Any directory name that's usually used? Does "services" make sense to you?
joulev
It depends on the project haha, in different projects I follow different rules. At times I don’t need route handlers so I don’t do this at all. (Now with server actions for mutations, route handlers are not as useful as they used to be.)

services is a good name yes. Can also just name it lib/backend, lib/api, anything you want, really. As long as it is descriptive and not misleading. You can always rename it later on after all so don’t be too afraid of mistakes.
Gouty oak gall
alright, thanks a bunch. I noticed I waste way too much time picking directory/file names 🤣