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
gxp91
gxp912y ago
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
kukri_
kukri_2y ago
i changed it to as you said
kukri_
kukri_2y ago
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) @gxp91
gxp91
gxp912y ago
ima download the code and give it a spin see what i can find
kukri_
kukri_2y ago
it's a really small project, if you familiar with next that'd be easy for you
barry
barry2y ago
Why in the world @kukri_ did you use the use naming convention React sees it as a hook 🤦‍♂️
kukri_
kukri_2y ago
true.. i dont think if i change it, it will make a difference
barry
barry2y ago
It will
kukri_
kukri_2y ago
or no? theowat see nahh same stuff deranged @thatbarryguy
barry
barry2y ago
Maybe NEXT_PUBLIC_API_URL isn't available on the server.
kukri_
kukri_2y ago
i am not sure either, first time writing some 'backend' code
barry
barry2y ago
import { headers } from 'next/headers'

const Page = () => {
const headersInstance = headers()
const [subdomain, domain] = headersInstance.get('host').split('.')

...
}
import { headers } from 'next/headers'

const Page = () => {
const headersInstance = headers()
const [subdomain, domain] = headersInstance.get('host').split('.')

...
}
I found this
kukri_
kukri_2y ago
did not really help, the subdomain just gives me back localhost:3000 rest is undefined
barry
barry2y ago
Isn't that all you need I'm guessing it will give you your domain when hosting on Vercel
gxp91
gxp912y ago
@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;
barry
barry2y ago
Can't do that
gxp91
gxp912y ago
why not it worked for me
kukri_
kukri_2y ago
@thatbarryguy i am trying your approach now..
barry
barry2y ago
With app directory? Server component
kukri_
kukri_2y ago
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&apos;m K-Tsou. </div> <div className="flex flex-col gap-1"> {posts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </div> </div> ); }
gxp91
gxp912y ago
helper
export const useGetBlogInfo = async () => {
const url = `/api/getInfo`;

console.log(`Fetching data from URL: ${url}`);

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 const useGetBlogInfo = async () => {
const url = `/api/getInfo`;

console.log(`Fetching data from URL: ${url}`);

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;
};
@thatbarryguy yes sir i am running his code i downloaded it from github changed that one line and it runs like butter
barry
barry2y ago
I'd like to see you host it.
kukri_
kukri_2y ago
@gxp91 that's the only change and it works?
gxp91
gxp912y ago
ok let me add it to my github repo and give it a spin
barry
barry2y ago
Locally, I don't think he has the ability to do relative paths on Vercel
gxp91
gxp912y ago
may be true i havent messed with vercel i usually self host yeah vercel is not liking it hmm 🙂
kukri_
kukri_2y ago
@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&apos;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
barry
barry2y ago
theowat gib up, fuck app dir Good luck
kukri_
kukri_2y ago
fixed it @thatbarryguy
barry
barry2y ago
What was it
kukri_
kukri_2y ago
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' );
gxp91
gxp912y ago
😄
kukri_
kukri_2y ago
man it took like hours
gxp91
gxp912y ago
thanks for the insightful support @thatbarryguy i also learned some new things today
kukri_
kukri_2y ago
that happens when you use alpha for production theowat
Want results from more Discord servers?
Add your server