Next.js Discord

Discord Forum

Cannot deploy to vercel Error occurred prerendering page

Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I've sent the full error message (see attachment)
I just don't know what to do and I've never ran into this error
I tried the things the docs say but didn't work

69 Replies

Australian Freshwater CrocodileOP
And here is my file structure
I'd appreciate if anyone knows the solution
LuisLl
Would you mind showing the not-found.tsx component?
@Australian Freshwater Crocodile Click to see attachment
B33fb0n3
can you move your not-found.tsx inside the /app folder and try again?
@B33fb0n3 can you move your not-found.tsx inside the /app folder and try again?
Australian Freshwater CrocodileOP
It's inside the app already
@LuisLl Would you mind showing the not-found.tsx component?
Australian Freshwater CrocodileOP
Yeah but lemme note that it was like this before I even added the not-found.tsx
I added not-found so maybe it gets fixed but nothing happened
@LuisLl Would you mind showing the not-found.tsx component?
Australian Freshwater CrocodileOP
'use client';
import Link from 'next/link'

const NotFound = () => {
  return (
    <section
      className="min-h-screen flex flex-col items-center justify-center bg-gray-100 text-center"
    >
      <h1 className="text-6xl font-bold text-gray-800">404</h1>
      <p className="text-xl text-gray-600 mt-4">The page you are looking for does not exist.</p>
      <p className="text-lg text-gray-500 mt-2">You can go back to the homepage.</p>
      <Link
        href="/"
        className="mt-6 text-blue-500 underline hover:text-blue-700"
      >
        Homepage
      </Link>
    </section>
  );
};

export default NotFound;
@Australian Freshwater Crocodile It's inside the app already
B33fb0n3
maybe I am wrong, but it looks like the not-found.tsx is currently in app/service/[slug]. Would you mind moving it to app/?

Please share your layout.

Do you have a .env file?
@B33fb0n3 maybe I am wrong, but it looks like the not-found.tsx is currently in app/service/[slug]. Would you mind moving it to `app/`? Please share your layout. Do you have a .env file?
Australian Freshwater CrocodileOP
import { getSettings } from "@/actions/content.actions";
import "./globals.css";
import Layout from "@/components/layout";
import { getServices } from "@/actions/service.actions";

export async function generateMetadata() {
  const settings = await getSettings();

  return {
    title: `${settings.site_name} | ${settings.site_main_title}`,
    description: settings.site_description,
    openGraph: {
      title: `${settings.site_name} | ${settings.site_main_title}`,
      description: settings.site_description,
      url: `${settings.domain}`,
      images: [{ url: settings.image }],
      type: 'website',
    },
  };
}

export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
  const services = await getServices()
  const settings = await getSettings();

  return (
    <html lang="en">
      <body>
        <Layout services={services} settings={settings}>
          {children}
        </Layout>
      </body>
    </html>
  );
}
And yes I have a .env file
API_URL=myurl
const API_BASE_URL = process.env.API_URL
B33fb0n3
@Australian Freshwater Crocodile can you share example urls for the settings.domain and the settings.image

The .env is available on github, so it contains only public information. Please share the API_URL and the API_BASE_URL. You can exchange your domain/IP inside the url of course.

The important point for me is the structure of these urls
B33fb0n3
@Australian Freshwater Crocodile ?
@B33fb0n3 <@442728361970892801> ?
Australian Freshwater CrocodileOP
Sorry for late response
export const getSettings = unstable_cache(
    async () => {
        const response = await fetch(`${API_BASE_URL}site/settings/`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        })
        if (!response.ok) {
            throw new Error(response.statusText);
        }
        return await response.json();
    },
    ['settings'],
    { revalidate: 3600, tags: ['settings'] }
)
export const getServices = async () => {
    const response = await fetch(`${API_BASE_URL}services/`, {
        method: "GET",
        headers: {
            "Content-Type": "application/json"
        }
    })
    if (!response.ok) {
        throw new Error(response.statusText);
    }
    return await response.json();
}
@Australian Freshwater Crocodile Sorry for late response
B33fb0n3
Thanks for sharing the code. The important point for me is the structure of these urls. Please share me the URLs
I have this in my env
@Australian Freshwater Crocodile http://51.119.111.111/
B33fb0n3
Great. Is it all the same (at least the structure) for these 4 variables (see attached)?
@B33fb0n3 Great. Is it all the same (at least the structure) for these 4 variables (see attached)?
Australian Freshwater CrocodileOP
Yeah I hae API_URL in my env
Oh nooooo
bruh
My friend added these things himself
And once he used API_URL and one API_BASE_URL
@Australian Freshwater Crocodile Yeah I hae API_URL in my env
B33fb0n3
oh ok, so the URLs were structured wrong and that's why the deployment failed, right?
@B33fb0n3 oh ok, so the URLs were structured wrong and that's why the deployment failed, right?
Australian Freshwater CrocodileOP
Ig this is the problem
Lemme check if its deploying or not
nop
@Australian Freshwater Crocodile Click to see attachment
B33fb0n3
hmm, check the urls again. Console.log them. I am pretty sure that's the issue.

If you just want to deploy really quick while removing some functionality, then remove (or comment out) the generateMetadata function for a moment
Um I got this
export const getSettings = unstable_cache(
    async () => {
        const response = await fetch(`${API_URL}site/settings/`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        })
        if (!response.ok) {
            throw new Error(response.statusText);
        }
        return await response.json();
    },
    ['settings'],
    { revalidate: 3600, tags: ['settings'] }
)
@Australian Freshwater Crocodile Click to see attachment
B33fb0n3
yea, your variables seems to be undefined. Make sure to reference it correctly like: process.env.API_URL and check if the .env variable exists and is set. In other code examples you used API_BASE_URL, so depending on your project, you want to try that as well
@B33fb0n3 yea, your variables seems to be undefined. Make sure to reference it correctly like: `process.env.API_URL` and check if the .env variable exists and is set. In other code examples you used `API_BASE_URL`, so depending on your project, you want to try that as well
Australian Freshwater CrocodileOP
I did it and now : 
  [cause]: Error: unknown scheme
      at getSettings.revalidate (file://C%3A/Users/Bardia/Desktop/SoonDevelope/ByDev/agency/frontend/src/actions/content.actions.ts:26:31)
      at async Module.generateMetadata (file://C%3A/Users/Bardia/Desktop/SoonDevelope/ByDev/agency/frontend/src/app/layout.tsx:7:19)
    24 | export const getSettings = unstable_cache(
    25 |     async () => {
  > 26 |         const response = await fetch(`${API_URL}site/settings/`, {
       |                               ^
    27 |             method: "GET",
    28 |             headers: {
    29 |                 "Content-Type": "application/json"
}
 GET / 500 in 183ms
I have .env set up
And I have a API_URL in it
const API_URL = process.env.API_URL
'use server'

import { unstable_cache } from 'next/cache'

const API_URL = process.env.API_URL


export const getSettings = unstable_cache(
    async () => {
        const response = await fetch(`${API_URL}site/settings/`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        })
        if (!response.ok) {
            throw new Error(response.statusText);
        }
        return await response.json();
    },
    ['settings'],
    { revalidate: 3600, tags: ['settings'] }
)
I'll try it
B33fb0n3
@Australian Freshwater Crocodile tried?
@B33fb0n3 <@442728361970892801> tried?
Australian Freshwater CrocodileOP
Yea
Still didn't work
Bruh I really don't understand this
What does this even mean
@Australian Freshwater Crocodile Click to see attachment
B33fb0n3
I guess I am not enough in your project to be able to solve this issue. Please share a reproduction of the specific issue (for example via github or codesandbox) to find a solution
@Australian Freshwater Crocodile Click to see attachment
LuisLl
Are you sure your process.env.API_URL ends with “/“?

Might be stupid but .env are still variables that get replaced when running your app.
If you have either of these:
API_URL=your-domain.com
API_URL=your-domain.com/api

It’ll be taken as such when replacing the env vars:
your-domain.comsite/faq
your-domain.com/apisite/faq.

So either add the trailer slash in your .env file or add the “/“ in every fetch call before the rest of the path
like when I do example.com/
It goes like example.com (the / getting removed)
And yea I'm sure that I have / at the end of the url in my env
LuisLl
Yea, I’m asking if you have the trailing “/“ in the .env file
API_URL=http://51.119.111.111/
@LuisLl Yea, I’m asking if you have the trailing “/“ in the .env file
Australian Freshwater CrocodileOP
It's like this
The frontend folder
@Australian Freshwater Crocodile The frontend folder
B33fb0n3
how to reproduce the error? It looks like you didnt ship any .env files, or am I blind?