Im getting an error during build time
Answered
Mud-daubers posted this in #help-forum
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
your
on
on
Solution i propose,
just put the content-ful logic directly in
/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 accessibleon
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 erroSolution i propose,
just put the content-ful logic directly in
/front-page
31 Replies
@Mud-daubers tsx
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.
try commenting every page.js in your project and leaving out only the
api
. And let me know the build logs@Alfonsus Ardani try commenting every page.js in your project and leaving out only the `api`. And let me know the build logs
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
Perfect
I see now
@Mud-daubers tsx
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.
your
your
on
on
Solution i propose,
just put the content-ful logic directly in
/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 accessibleon
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 erroSolution i propose,
just put the content-ful logic directly in
/front-page
Answer
@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`
Mud-daubersOP
I don't have to create route handlers?
Will I be leaking my env?
Will I be leaking my env?
@Mud-daubers I don't have to create route handlers?
Will I be leaking my env?
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_
@Alfonsus Ardani 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_`
Mud-daubersOP
What if I use 'use client' at the top?
@Alfonsus Ardani then it will return `undefined`
Mud-daubersOP
So i won't be leaking my env even if I accidentally use 'use client' at the same component with fetch function?
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
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?
@Mud-daubers Also, if you cannot use the api end points created in Next js. What is the use of it?
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
@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
Mud-daubersOP
So the problem is fetcing data from page.js, what if I move it to another component?
@Mud-daubers So the problem is fetcing data from page.js, what if I move it to another component?
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
Mud-daubersOP
So, can you explain a use case where one should use the route handlers?
@Alfonsus Ardani This https://discord.com/channels/752553802359505017/1314637306367442985/1315537163273633882
Mud-daubersOP
But you said If i do 'use client' it'll return undefined?
the env var will return undefined
you can still use Next.js route handlers
Mud-daubersOP
owh okie
thanks ❤️