Cannot deploy to Vercel with Next13.4
I cannot deploy my project to Vercel, with app directory.
I have set all env variables right, such as in my local .env i have the local host and in Vercel i have my actual domain to NEXT_PUBLIC_API_URL.
Here's my project it's a small one. Im also not sure if i have the correct folder structure.
In my localhost everything is working fine but something is wrong either with api routes or tha page.tsx where the app is mounting as i am trying to SSR there.
https://github.com/KukR1/blog-markdown-ktsoumas
The error from Vercel:
Error: HTTP error! status: 404
at GetData (/vercel/path0/.next/server/app/page.js:366:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:373:30)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: HTTP error! status: 404
at GetData (/vercel/path0/.next/server/app/page.js:366:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:373:30)
GitHub
GitHub - KukR1/blog-markdown-ktsoumas
Contribute to KukR1/blog-markdown-ktsoumas development by creating an account on GitHub.
37 Replies
Try moving your hooks.ts outside of the main apps directory. if you click on the error it says it doesnt like non page files in your page folder: https://nextjs.org/docs/messages/prerender-error
i changed it to as you said
but still getting the same error of the function that you see on screenshot
Error: HTTP error! status: 404
at useGetBlogInfo (/vercel/path0/.next/server/app/page.js:340:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:376:30)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: HTTP error! status: 404
at useGetBlogInfo (/vercel/path0/.next/server/app/page.js:340:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Home (/vercel/path0/.next/server/app/page.js:376:30)
@gxp91ima download the code and give it a spin see what i can find
it's a really small project, if you familiar with next that'd be easy for you
Why in the world @kukri_ did you use the
use
naming convention
React sees it as a hook 🤦♂️true..
i dont think if i change it, it will make a difference
It will
or no? see
nahh same stuff @thatbarryguy
Maybe
NEXT_PUBLIC_API_URL
isn't available on the server.i am not sure either, first time writing some 'backend' code
I found this
did not really help, the subdomain just gives me back
localhost:3000
rest is undefined
Isn't that all you need
I'm guessing it will give you your domain when hosting on Vercel
@kukri_ so the first thing to simpify the codei would remove the need for ${process.env.NEXT_PUBLIC_API_URL} all together in your getBlogInfo.ts just use the relative path : const url =
/api/getInfo
;Can't do that
why not it worked for me
@thatbarryguy i am trying your approach now..
With app directory? Server component
export const getBlogInfo = async (url: string) => {
const res = await fetch(url, {
cache: 'no-store',
});
if (!res.ok) {
console.error('Response not OK:', await res.text());
throw new Error(
HTTP error! status: ${res.status});
}
const json = await res.json();
console.log('Fetched data:', json);
return json;
};
export default async function Home() {
const headersList = headers();
const referer = headersList.get('referer');
const { data: posts }: Posts = await getBlogInfo(
${});
console.log(referer);
return (
<div className="flex flex-col items-start gap-3 max-w-2xl py-5 mx-auto px-6 text-start">
<div className="text-white font-semibold">
Hey there, I'm K-Tsou.
</div>
<div className="flex flex-col gap-1">
{posts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
</div>
);
}
helper
@thatbarryguy yes sir i am running his code
i downloaded it from github changed that one line and it runs like butter
I'd like to see you host it.
@gxp91 that's the only change and it works?
ok let me add it to my github repo and give it a spin
Locally, I don't think he has the ability to do relative paths on Vercel
may be true i havent messed with vercel i usually self host
yeah vercel is not liking it hmm 🙂
@thatbarryguy it actually worked
export default async function Home() {
const headersList = headers();
const referer = headersList.get('referer');
const { data: posts }: Posts = await getBlogInfo(
${referer}/api/getInfo);
return (
<div className="flex flex-col items-start gap-3 max-w-2xl py-5 mx-auto px-6 text-start">
<div className="text-white font-semibold">
Hey there, I'm K-Tsou.
</div>
<div className="flex flex-col gap-1">
{posts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
</div>
);
}
i get this error as it does not show nothing after deploy: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error
gib up, fuck app dir
Good luck
fixed it @thatbarryguy
What was it
just had to change the fetcher function to accept a url and call it in /app/page.tsx
instead of using headers
const { data: posts }: Posts = await getBlogInfo(
'${process.env.NEXT_PUBLIC_API_URL}/api/getInfo'
);
😄
man it took like hours
thanks for the insightful support @thatbarryguy i also learned some new things today
that happens when you use
alpha
for production