Error: Failed to parse URL from /api
Answered
Siberian Accentor posted this in #help-forum
Siberian AccentorOP
I have this route
api/routes
api/routes
export async function GET() {
return new Response("Hello, world!")
}Answered by joulev
When in server component, run server side code directly
When in client component, if you want to do client side rendering, call api routes using proper client side fetching methods, such as react-query
When in client component, if you want to do client side rendering, call api routes using proper client side fetching methods, such as react-query
40 Replies
Siberian AccentorOP
app/(routes)/dashboard/page.tsx
const Dashboard = async () => {
const res = await fetch("/api") // also tried to add http:localhost:3000/api
const data = res.json()
console.log(data)
return (
<main className="flex h-screen flex-1 flex-col gap-4 lg:gap-6 ">
<div className="flex items-center border-b p-2">
<h1 className="px-3 text-2xl font-semibold">Dashboard</h1>
</div>
</main>
)
}Munchkin
is your api folder in app?
so app/api?
Siberian AccentorOP
yes
when I go to http://localhost:3000/api
I see the json
I see the json
Munchkin
if you dont read out for json. And just console.log(res)
What do you get?
What do you get?
@Munchkin if you dont read out for json. And just console.log(res)
What do you get?
Siberian AccentorOP
let me send it
Munchkin
alright.
also btw are you using Nextreponse?
Siberian AccentorOP
yes, I'm using nextresponse
@Siberian Accentor I have this route
api/routes
typescript
export async function GET() {
return new Response("Hello, world!")
}
Munchkin
asking cause this is just Response()
Siberian AccentorOP
do I have to add http://localhost:3000 on the fetch
Munchkin
no /api will do as it is a dynamic route
but if i understand correctly.
Your api folder is /api/routes/route.js?
Your api folder is /api/routes/route.js?
@Siberian Accentor
Siberian AccentorOP
I just put it like api/route.ts
and hitting /api
Munchkin
ok. yes that should work just fine..
Hmmm.
Siberian AccentorOP
But not working
@Siberian Accentor I have this route
api/routes
typescript
export async function GET() {
return new Response("Hello, world!")
}
[Do not fetch your own api routes in server components](https://nextjs-faq.com/fetch-api-in-rsc)
Siberian AccentorOP
oh, I think I can't fetch from server component
Munchkin
personally i just exported the function on my SSR and just import it on my CSR.
then i can just await that function
works the same way and i dont have to fetch
well i do but its build in
Siberian AccentorOP
so I should call the function in client component
Munchkin
Thats whats i do. Not sure if it the correct practise but it works for me
Api is a headache
Siberian AccentorOP
It did work when I call it on client component, weird
@Munchkin @joulev So,
when it server component, call the domain directly
when it client component, call from /api ??
when it server component, call the domain directly
when it client component, call from /api ??
Siberian AccentorOP
@joulev Yeah I'm reading, but is my metaphor is correct or wrong ?
I want to keep it on mind everytime
@Siberian Accentor <@186394013908074496> <@484037068239142956> So,
when it server component, call the domain directly
when it client component, call from /api ??
When in server component, run server side code directly
When in client component, if you want to do client side rendering, call api routes using proper client side fetching methods, such as react-query
When in client component, if you want to do client side rendering, call api routes using proper client side fetching methods, such as react-query
Answer
Siberian AccentorOP
@joulev Thanks, Well written blog 🙏