Next.js Discord

Discord Forum

Im getting an error during build time

Answered
Mud-daubers posted this in #help-forum
Open in Discord
Avatar
Mud-daubersOP
Error occurred prerendering page "/front-page". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at node:internal/deps/undici/undici:13185:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async n (D:\Programming\Projects\ogat-guardian\.next\server\chunks\947.js:1:7681)
    at async m (D:\Programming\Projects\ogat-guardian\.next\server\chunks\947.js:1:3849)
Export encountered an error on /front-page/page: /front-page, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null


I have checked my git logs and the error stats from this commit onward, commits before this doesn't have an issue during build https://github.com/StDensity/ogat-guardian/commit/3bd919aeb3e28048d32016081ce3a0e64e5ef9fb

ps: ignore the ts and eslint errors for now.
Answered by Alfonsus Ardani
your /front-page is trying to be rendered statically.
your getMinimalNormalNews is a function that runs the fetchAPI to your own server (dont do this)
on npm build, your server isn't run. Therefroe /api/contenful/* is not yet accessible
on npm build your /front-page is trying to hit your own server API. But the server isn't up yet so it is throwing an erro

Solution i propose,
just put the content-ful logic directly in /front-page
View full answer

31 Replies

Avatar
@Alfonsus Ardani try commenting every page.js in your project and leaving out only the `api`. And let me know the build logs
Avatar
Mud-daubersOP
its working

> ogat-guardian@0.1.0 build
> next build

   ▲ Next.js 15.0.3
   - Environments: .env.local

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping validation of types
   Skipping linting
 ✓ Collecting page data    
 ✓ Generating static pages (11/11)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization

Route (app)                                     Size     First Load JS
┌ ƒ /                                           156 B           100 kB
├ ○ /_not-found                                 896 B           101 kB
├ ƒ /api/contentful/content-type/author         156 B           100 kB
├ ƒ /api/contentful/content-type/news-category  156 B           100 kB
├ ƒ /api/contentful/content-type/normal-news    156 B           100 kB
├ ƒ /api/contentful/content-type/sports-news    156 B           100 kB
├ ƒ /api/contentful/entries                     156 B           100 kB
├ ƒ /api/contentful/entries/[id]                156 B           100 kB
└ ƒ /front-page                                 156 B           100 kB
+ First Load JS shared by all                   99.8 kB
  ├ chunks/4bd1b696-1a29391295d98787.js         52.5 kB
  ├ chunks/517-3011a1145323e2b2.js              45.4 kB
  └ other shared chunks (total)                 1.91 kB


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand
Avatar
Perfect
I see now
Answer
Avatar
@Mud-daubers I don't have to create route handlers? Will I be leaking my env?
Avatar
Page.js is by default done in a server environment. You wont be leaking your env if your env doesn't start with NEXT_PUBLIC_
Avatar
@Alfonsus Ardani then it will return `undefined`
Avatar
Mud-daubersOP
So i won't be leaking my env even if I accidentally use 'use client' at the same component with fetch function?
Avatar
yep
as long as you dont accidentally name your env variables and prefix it with NEXT_PUBLIC_
but in the client it will show undefined
and will probably break things
so you have bigger problem to worry before it even goes to prod
Avatar
Mud-daubersOP
Ok good thanks a ton
Also, if you cannot use the api end points created in Next js. What is the use of it?
Avatar
@Mud-daubers Also, if you cannot use the api end points created in Next js. What is the use of it?
Avatar
you can use it. but in this specific use case, it is pointless
i.e, client-side data fetching, external app's data fetching, caching stuff
but if you only fetch in page.js it is useless since page.js and route.js both are already in the same server
Avatar
@Alfonsus Ardani but if you only fetch in page.js it is useless since page.js and route.js both are already in the **same** server
Avatar
Mud-daubersOP
So the problem is fetcing data from page.js, what if I move it to another component?
Avatar
@Mud-daubers So the problem is fetcing data from page.js, what if I move it to another component?
Avatar
depends, if "another component" is a server component, then just import contentful
if client component then use fetch/server action, or retrieve data from server component
Avatar
Mud-daubersOP
So, can you explain a use case where one should use the route handlers?
Avatar
@Alfonsus Ardani This https://discord.com/channels/752553802359505017/1314637306367442985/1315537163273633882
Avatar
Mud-daubersOP
But you said If i do 'use client' it'll return undefined?
Avatar
the env var will return undefined
you can still use Next.js route handlers
Avatar
Mud-daubersOP
owh okie
thanks ❤️