Can`t build project
Answered
Николя posted this in #help-forum
НиколяOP
Hello everyone, i'm faced with a problem that I'm trying to build a project, errors appear, because of this I can't deploy to Vercel, but if I just run the project npm run dev, then everything works, why is that?
Example Error
Example Error
Error occurred prerendering page "/choose". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11730:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async globalThis.fetch (C:\Users\ribal\OneDrive\Desktop\Anime_Musoku_Tokino\musoku_tokino\.next\server\chunks\638.js:1:36484) .........................Answered by joulev
Yes that’s best practice. You are already running the logic on the server, no need to make an api route for the server to talk with itself
16 Replies
НиколяOP
My fetch example
if I remove {
next: { revalidate: 5000 }, // Revalidate every 5 seconds
}
then the error disappears, what could be causing this?
async function fetchData() {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
console.log('API URL:', apiUrl); // Логирование URL для отладки
const res = await fetch(`${apiUrl}/api/data`, {
next: { revalidate: 5000 },
});
const result = await res.json();
console.log(result);
return result;
}if I remove {
next: { revalidate: 5000 }, // Revalidate every 5 seconds
}
then the error disappears, what could be causing this?
@Николя My fetch example
async function fetchData() {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
console.log('API URL:', apiUrl); // Логирование URL для отладки
const res = await fetch(`${apiUrl}/api/data`, {
next: { revalidate: 5000 },
});
const result = await res.json();
console.log(result);
return result;
}
if I remove {
next: { revalidate: 5000 }, // Revalidate every 5 seconds
}
then the error disappears, what could be causing this?
НиколяOP
Not true, the error is back
don't fetch your own route handler inside server components https://nextjs-faq.com/fetch-api-in-rsc
@joulev don't fetch your own route handler inside server components <https://nextjs-faq.com/fetch-api-in-rsc>
НиколяOP
Here is my example api/data
I understood correctly that I need to call fetch here in the api, and then directly call it on my page with the example import
Or how?
import { NextResponse } from "next/server";
import { callAnime } from '@/db';
export async function GET(req) {
try {
const serias = await callAnime('SELECT * FROM series WHERE ReleasData <= NOW()', []);
// console.log("API data fetched successfully:", serias);
return NextResponse.json(serias);
} catch (error) {
console.log(error);
// res.status(500).json({ message: 'Ошибка при получении продуктов' });
}
}I understood correctly that I need to call fetch here in the api, and then directly call it on my page with the example import
{ fetchSeriesOnline}Or how?
@joulev don't fetch your own route handler inside server components <https://nextjs-faq.com/fetch-api-in-rsc>
НиколяOP
I realized that the error is due to the fact that during assembly it requests an api, but there is no api yet, but I still don’t understand how to fix it
@Николя Here is my example api/data
import { NextResponse } from "next/server";
import { callAnime } from '@/db';
export async function GET(req) {
try {
const serias = await callAnime('SELECT * FROM series WHERE ReleasData <= NOW()', []);
// console.log("API data fetched successfully:", serias);
return NextResponse.json(serias);
} catch (error) {
console.log(error);
// res.status(500).json({ message: 'Ошибка при получении продуктов' });
}
}
I understood correctly that I need to call fetch here in the api, and then directly call it on my page with the example import { fetchSeriesOnline}?
Or how?
no. in your page run
const serias = await callAnime('SELECT * FROM series WHERE ReleasData <= NOW()', []); and use serias directlyНиколяOP
ohhh, okay
How can you then make pages static and dynamic?
As I understand it, they will be static automatically, but how can I make it revalidate?
How can you then make pages static and dynamic?
As I understand it, they will be static automatically, but how can I make it revalidate?
@joulev `export const revalidate = n` <https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate>
НиколяOP
Wow, very cool
And it turns out that I don’t need my api/data (and another route) at all?
And it turns out that I don’t need my api/data (and another route) at all?
yes
@joulev yes
НиколяOP
Oh, and is this considered good practice? This time I’ll do everything exactly this way, but I’m very interested in whether there are any more convenient and better options for using the api in nextjs?
@joulev yes
НиколяOP
Thank you very much for your help, you helped me a lot
@Николя Oh, and is this considered good practice? This time I’ll do everything exactly this way, but I’m very interested in whether there are any more convenient and better options for using the api in nextjs?
Yes that’s best practice. You are already running the logic on the server, no need to make an api route for the server to talk with itself
Answer
@joulev Yes that’s best practice. You are already running the logic on the server, no need to make an api route for the server to talk with itself
НиколяOP
Okay, I understand, thank you very much