Run build error
Hi could someone hop in a call with me and help me out with a getstaticprops problem. trying to get my portfolio done so i can apply for internships.
this is the error when i npm run build,
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:14062:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchPageInfo (C:\Users\Nando\Documents\Fernando_Portfolio\portfolio\my-portfolio.next\server\pages\index.js:949:17)
at async getStaticProps (C:\Users\Nando\Documents\Fernando_Portfolio\portfolio\my-portfolio.next\server\pages\index.js:922:22)
24 Replies
Well,
TypeError: fetch failedthe fetch has failed, pretty clear message. Check the URL and whatnot or add a catch clause to see why.
hahaha yeah. thing is its fetching all the data everything works fine in dev but on build it says that what i am fetching is not json. But i turn the res to json in my api
then check what it is, typically it's a case where you're getting a HTTP page for 404 error as a response and that, indeed, is not JSON
Please read this thread.
https://discord.com/channels/966627436387266600/1166407671902130176
its not trpc i am sadly using plain nextjs haha
I think Josh's point is that there's no info
Correct. If you would have even bothered to look at the first 2 messages, there is no context here
And I really don't feel like recreating that thread with you here
oh okay give me a sec!
my bad hah
this is my api,
import type { NextApiRequest, NextApiResponse } from "next";
import {groq} from "next-sanity";
import { client } from "../../../sanity.config";
import { PageInfo } from "../../../typings";
const query = groq
*[_type == "pageInfo"][0]
type Data = {
pageInfo: PageInfo
}
export default async function handler(req:NextApiRequest, res: NextApiResponse<Data>) {
const pageInfo : PageInfo = await client.fetch(query);
res.status(200).json({pageInfo});
}Im amazed you didn't even attempt to look at what I sent. What if your problem was actually solved in there? Don't be lazy. If you're asking for help and people offer it, don't blow it off
Any time you send code you should format it
I'm not reading anything until you have read that thread I posted
alright give me a longer second have to figure out how to format
We still have no context
Read this thread
yes will do
Alright so i am coding a portfolio with next.js, typescript and sanity. I have connected sanity (took way too much time for me) and created apis to get the data and then utils functions to fetch from the api and ran the utils function in a getStaticProps. In my dev environment everything work but when i run build i get this error on vercel:
As i understand from googling a little is that either im fetching something that isnt json from sanity or its not fetching and recieveing 404 html. I am very new to solving errors that are more api or backend related so im am a complete 0 at it.
My api looks like this:
My getStaticProps:
I dont know if this could be the cause of the problem since it was what fixed the whole api problem i had with sanity in my dev environment.
In my .env.local i added
This is what i get from my api:
are you sure that
process.env.NEXT_PUBLIC_BASE_URL is defined in the env where it doesn't work?
I'd reiterate my initial suggestion - check what error fetch gives youright now my base url is just http//:localhost:3000/ , i googled my issue and a few were saying it was because of the url. I honestly dont have enough knowledge to know why but the env line fixed it. When i had uploaded it it vercel i was gonna take away the line and put in the hosting url and see if it worked.
your localhost is over HTTP, remote will be over HTTPS
can you please just see what fetch doesn't like, the solution is probably right there in that error
Sorry i am very bad at error handling. Do you want me to create a try catch on the api file or utils?
you have a function (fetch) that's failing, you should therefore inspect the input and the output
- input is the URL, which comes from process.env - this might be undefined
- output in this case is an error
you can console.log it, you can step into it with a debugger, whatever you can do to get to it
you can add a .catch to that fetch call
or a try..catch block
i hope to god this is what you were wanting
thanks for the code i was doing something waaaay diffrent
connection refused on localhost:3000 is what this says
you got that during build? if so, where is this building?
i just ran it on my terminal npm run build but its also getting error on vercel
but on vercel i have added the url of the site as a env
on Vercel obviosuly it will not be able to connect to localhost:3000, you have to set the URL in project settings env variables
as a base url i mean
during build on your local machine, I assume the app is not running so there is nothing serving that /api/getPageInfo endpoint that it's trying to reach during build
it will only work if you run the app in one terminal, then build in another terminal, then the app that's running will serve that request on localhost:3000
but on vercel i have added the url of the site as a envyou added the URL of the site that you're trying to build, and you need it to serve you an API that's needed for t he build step (static props)? I'm not sure if that's a bulletproof setup you should be pointing that fetch to an external source of data for it to build the static props, ig you're building on localhost, don't point to localhost unless you have the app running in parallel, if you're building on a remote env, don't point to that very same env
alright thank you i think i understand. will try to follow sanity docs instead of tutorial see if that helps. Otherwise ill just do everything manually. Thank you so much you gave me a lot more clarity of where and why things are going wrong. Sorry for not being specific about my problem in the beginning.