Nextjs Prod build error

[Sathyaraj-dev]

TypeError: fetch failed
at node:internal/deps/undici/undici:12345:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
cause: AggregateError
at internalConnectMultiple (node:net:1114:18)
at afterConnectMultiple (node:net:1667:5)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
code: 'ECONNREFUSED',
[errors]: [ [Error], [Error] ]
},
digest: '1990109165'
}

Anyone know why this error is coming on npm run build? Please help me on this.

[icyJoseph]

Hi,

You are most likely fetching your own server's API endpoint, but during build time there's no API endpoint, because the server is not build just yet.

• https://nextjs-faq.com/fetch-api-in-rsc

Instead of fetching from your own API endpoint, inline the code that gets the data you need, into your server component, which is one of the reasons to have server components in the first place.

The link above summarizes the problem, please do read through it.

[Sathyaraj-dev]

Thanks, icyJoseph. Yes, I called the API on server components, and that's the issue. I cross-checked the production checklist and found the answers.

Route Handlers: Use Route Handlers to access your backend resources from Client Components. But do not call Route Handlers from Server Components to avoid an additional server request.

Thanks for your help!

[PunkFleet]

Hi,

You are most likely fetching your own server's API endpoint, but during build time there's no API endpoint, because the server is not build just yet.

• https://nextjs-faq.com/fetch-api-in-rsc

Instead of fetching from your own API endpoint, inline the code that gets the data you need, into your server component, which is one of the reasons to have server components in the first place.

The link above summarizes the problem, please do read through it.

Hi, Im newbie for Nextjs, I moved from vitejs to nextjs and am trying to build rewritten projects. I read the article but case in point it seems to use a prisma plugin. Can I not use it?

[PunkFleet]

@icyJoseph
I have a server src/app/name/page.tsx and currently it's requesting my backend api directly within the component

type Props = {
    params: { name: string; lang: string };
};

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
    const item = await getPublicData("name", params.name);
    return {
        title: `${params.name}.`,
        keywords: item.seo_title,
        description: item.seo_description,
    };
}
export default async function Page({ params }: { params: { name: string; lang: string } }) {
        const item = await getPublicData('name', params.name)
    const features = await getPublicData("features")
    const faq = await getPublicData("faq_detail")
    

so i must add a Router.ts for this page in path src/app/name/api/route.tx, right?

export async function GET({ params }: { params: { name: string; lang: string } }) {
    const item = await getPublicData('name', params.name)
    const features = await getPublicData("features")
    const faq = await getPublicData("faq_detail")
  const it = await item.json()
  const fe = await features.json()
  const fa = await faq.json()
 
  return Response.json({ it, fe, fa })
}

But how i using the return data in Page? and then would it be necessary to add an api/route.ts file to every server-side page? Would that be too cumbersome?

[PunkFleet]

The 8000api server built with django also includes a request interface for the administrator panel, which is separate from the front-end project that the user can access.

[icyJoseph]

Yes, The 8000 is an api service built with django and all fetch requests are sent to this server, currently I don't have it turned on locally.

Then you'll need to defer to runtime/on-demand rendering with force-dynamic

[PunkFleet]

Thank you sooooooooo much for help , @icyJoseph .😘😘😘
finnally, i build success.
first i opend localhost:8000 server, then i add export const dynamic = 'force-dynamic' for every server page and remove 'use server' at getPublicData.ts.

But for production, does this mean that I have to get the backend django deployment live before deploying nextjs so that I can deploy it successfully after the .env file changes the address to the real domain? Also in the future would you consider adding a change to const dynamic = 'force-dynamic' in nextjs.config.mjs? Because it seems like adding one of these commands per page is a bit redundant.

[icyJoseph]

Yeah you need to make the effort to sync your next.js env values with the production values.

Perhaps l, you'd benefit from this experimental feature, Partial pre-rendering: https://nextjs.org/learn/dashboard-app/partial-prerendering

First, though, make sure everything works in production.

[PunkFleet]

works

Yes, It's a completely different build than react, and I still have a lot of new things to learn. But for now, I feel like nextjs is an amalgamation of react and traditional web applications. It's secure and meets modern build standards.
Thanks again for the generous help!🥰