Theo's Typesafe Cult•2y 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•2y 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_OP•2y ago

i changed it to as you said

kukri_OP•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•2y ago

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

kukri_OP•2y ago

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

barry•2y ago

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

kukri_OP•2y ago

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

barry•2y ago

It will

kukri_OP•2y ago

or no?

see nahh same stuff deranged

@thatbarryguy

barry•2y ago

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

Tenor

barry•2y ago

Maybe NEXT_PUBLIC_API_URL isn't available on the server.

kukri_OP•2y ago

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

barry•2y 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_OP•2y ago

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

barry•2y ago

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

gxp91•2y 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•2y ago

Can't do that

gxp91•2y ago

why not it worked for me

kukri_OP•2y ago

@thatbarryguy i am trying your approach now..

barry•2y ago

With app directory? Server component

kukri_OP•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•2y 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•2y ago

I'd like to see you host it.

kukri_OP•2y ago

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

gxp91•2y ago

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

barry•2y ago

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

gxp91•2y ago

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

kukri_OP•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•2y ago

gib up, fuck app dir Good luck

kukri_OP•2y ago

fixed it @thatbarryguy

barry•2y ago

What was it

kukri_OP•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'
  );

kukri_OP•2y ago

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

Tenor

gxp91•2y ago

😄

kukri_OP•2y ago

man it took like hours

gxp91•2y ago

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

kukri_OP•2y ago

that happens when you use alpha for production theowat

Gaming

Programming

Cannot deploy to Vercel with Next13.4