Problem to build next14 project
Answered
Giant panda posted this in #help-forum
Giant pandaOP
When i build a project cause this error:
I use a enviroment variable in server component.
My component is
const response = await fetch(api);
if (!response.ok) {
throw new Error('Ocorreu um erro ao executar a api' + endpoint);
}
return response.json();
};
const groups = async () => {
const groups = await getAllGroups();
return <GroupsList groups={groups} />;
};
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
at successSteps (node:internal/deps/undici/undici:5300:27)
at fullyReadBody (node:internal/deps/undici/undici:1447:9)
at async specConsumeBody (node:internal/deps/undici/undici:5309:7)I use a enviroment variable in server component.
My component is
``
const getAllGroups = async () => {
const endpoint = isProduction
? '/groups'
: 'api/mocks/groups';
//
Maybe erro is here
const api =${process.env.NEXT_PUBLIC_API}/${endpoint}`;const response = await fetch(api);
if (!response.ok) {
throw new Error('Ocorreu um erro ao executar a api' + endpoint);
}
return response.json();
};
const groups = async () => {
const groups = await getAllGroups();
return <GroupsList groups={groups} />;
};
68 Replies
dont fetch your own api
Giant pandaOP
dont work fetch api in server component?
Giant pandaOP
I need to get the api on the server-side, how do I do it then?
you can just make whatever your api route is doing, make it a function and call the function directly
Giant pandaOP
But am I not doing this?
Could u send a example please?
no you are calling your own api which nextjs dosent like, hence the need for making an env variable with your domain name
const api = ${process.env.NEXT_PUBLIC_API}/${endpoint}`;
const response = await fetch(api);@Arinji https://nextjs-faq.com/fetch-api-in-rsc
go through this
it explains everything
Giant pandaOP
So do I need to do everything in code and not the environment variables?
yes.
Giant pandaOP
This?
const api =
const api =
http://localhost:3000/${endpoint};dont use an api route
take whatever the api route is doing, make a new file.. make a function and call that function, dont fetch an api route
Giant pandaOP
i'll try
Giant pandaOP
Hey
Not worked
const urlApi = isProduction
? 'https://api.com.br/'
: 'http://localhost:3000/';
const getAllGroups = async () => {
const endpoint = isProduction ? '/groups' : '/api/mocks/groups';
const api =
const response = await fetch(api);
if (!response.ok) {
throw new Error('Ocorreu um erro ao executar a api' + endpoint);
}
return response.json();
};
? 'https://api.com.br/'
: 'http://localhost:3000/';
const getAllGroups = async () => {
const endpoint = isProduction ? '/groups' : '/api/mocks/groups';
const api =
${urlApi}${endpoint};const response = await fetch(api);
if (!response.ok) {
throw new Error('Ocorreu um erro ao executar a api' + endpoint);
}
return response.json();
};
What's incorrect?
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
at successSteps (node:internal/deps/undici/undici:5300:27)
at fullyReadBody (node:internal/deps/undici/undici:1447:9)
at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
✓ Generating static pages (13/13)
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
at successSteps (node:internal/deps/undici/undici:5300:27)
at fullyReadBody (node:internal/deps/undici/undici:1447:9)
at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
✓ Generating static pages (13/13)
did you change anything?
you are still fetching your own url..
Giant pandaOP
i changed process.env.PUBLIC_API to static string
im guessing api.com.br is your production domain
right?
Giant pandaOP
yes
again, dont fetch your own url.
there isnt any other solution then what its saying.
Giant pandaOP
Right, but I need to do a fetch, is there another way? Because even looking at the documentation I didn't understand
why do you need to fetch?
your component is a server component right?
Giant pandaOP
right
so then why do you need to fetch
Giant pandaOP
I need to hit the backend api and render via server
calling a function is still on the server
you cant fetch your own api. thats the end of that story. Its going to keep causing errors.
there is no difference in changing what you do in the api route and putting it in a function and importing that function
there is no difference in changing what you do in the api route and putting it in a function and importing that function
Giant pandaOP
So, is there any way I can do a get on the backend and render on the server?
@Giant panda I need to hit the backend api and render via server
your "backend api" and the "render via server" happens on the same place.
just call the db method directly on your server component
just call the db method directly on your server component
Giant pandaOP
This api is an integration, I can't hit the db
Giant pandaOP
Is there another way to hit an api and render it on the server?
what is your
/groups/route.ts ?Giant pandaOP
groups/routes.ts is a mock
oh so you will be hitting external api?
Giant pandaOP
yeeea
i need to render in server side
to show data in client
you can't fetch your own api.
therefore you can't use whatever method to get current Next URL
if you want to mock you can just
therefore you can't use whatever method to get current Next URL
if you want to mock you can just
return []const getAllGroups = async () => {
if (!isProduction) return [
// fill data here
] else fetchData()
}Giant pandaOP
i understanded now
So, it's impossible to render api routes in server components
its possible but its useless
Giant pandaOP
Nice
Ok man! thank u for help me
and thanks @Arinji
you can render api routes only if its outside of Next.js
like
fetch("https://yourrealbackenddata.com/")Giant pandaOP
understand
thanks for all
perfect, im glad you understand our point
Np, mark a solution :D
helpers do explain much better lol
Giant pandaOP
⌠Error!
You can't mark the post itself as the answer. If you figured out the issue by yourself, please send it as a separate message and mark it as the answer
You can't mark the post itself as the answer. If you figured out the issue by yourself, please send it as a separate message and mark it as the answer
tks