Theo's Typesafe Cult•13mo ago

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.

prerender-error | Next.js

37 Replies

gxp91•13mo 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

prerender-error | Next.js

kukri_•13mo ago

i changed it to as you said

kukri_•13mo 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•13mo ago

ima download the code and give it a spin see what i can find

kukri_•13mo ago

it's a really small project, if you familiar with next that'd be easy for you

barry•13mo ago

Why in the world @kukri_ did you use the use naming convention React sees it as a hook 🤦‍♂️

kukri_•13mo ago

true.. i dont think if i change it, it will make a difference

barry•13mo ago

It will

kukri_•13mo ago

or no?

see nahh same stuff deranged

@thatbarryguy

barry•13mo ago

https://tenor.com/view/hmm-suspect-gif-22611582

Tenor

barry•13mo ago

Maybe NEXT_PUBLIC_API_URL isn't available on the server.

kukri_•13mo ago

i am not sure either, first time writing some 'backend' code

barry•13mo 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_•13mo ago

did not really help, the subdomain just gives me back localhost:3000 rest is undefined

barry•13mo ago

Isn't that all you need I'm guessing it will give you your domain when hosting on Vercel

gxp91•13mo 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•13mo ago

Can't do that

gxp91•13mo ago

why not it worked for me

kukri_•13mo ago

@thatbarryguy i am trying your approach now..

barry•13mo ago

With app directory? Server component

kukri_•13mo 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•13mo 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•13mo ago

I'd like to see you host it.

kukri_•13mo ago

@gxp91 that's the only change and it works?

gxp91•13mo ago

ok let me add it to my github repo and give it a spin

barry•13mo ago

Locally, I don't think he has the ability to do relative paths on Vercel

gxp91•13mo ago

may be true i havent messed with vercel i usually self host yeah vercel is not liking it hmm 🙂

kukri_•13mo 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•13mo ago

gib up, fuck app dir Good luck

kukri_•13mo ago

fixed it @thatbarryguy

barry•13mo ago

What was it

kukri_•13mo 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'
  );

kukri_•13mo ago

https://tenor.com/view/facepalm-really-stressed-mad-angry-gif-16109475

Tenor

gxp91•13mo ago

😄

kukri_•13mo ago

man it took like hours

gxp91•13mo ago

thanks for the insightful support @thatbarryguy i also learned some new things today

kukri_•13mo ago

that happens when you use alpha for production theowat

Gaming

Programming

Cannot deploy to Vercel with Next13.4