Next.js Discord

Discord Forum

External API vs Internal

Answered
Whiteleg shrimp posted this in #help-forum
Open in Discord
Whiteleg shrimpOP
Hey there,

I am having an issue, probably something super easy that I've overlooked.
But when I call an API from an external source, like this example below it works:
const test = async () => { const response = await fetch("https://fakestoreapi.com/products"); const data = await response.json(); return data; }; export default async function Home() { const products = await test(); return ( <main> <h1>Products</h1> {products.map((product) => ( <div key={product.id}> <h2>{product.title}</h2> <p>{product.price}</p> </div> ))} </main> ); }


I've tried creating my own internal route under api/products that looks like this:
import { NextResponse } from "next/server"; export async function GET() { try { const response = await fetch("https://fakestoreapi.com/products"); const products = await response.json(); return NextResponse.json(products, { status: 200 }); } catch (error) { return NextResponse.json({ error }, { status: 500 }); } }

When I try this in Postman it works, but when I try to call it on my server side rendered page I don't get it to work, I just get this error while using fetch: Failed to parse URL from /api/products

I assume there is another way to do this correct, I just don't know how.

Thanks in advanced!
Answered by European sprat
if you do, i think you need to use the full url like http://localhost:3000 etc
View full answer

10 Replies

European sprat
you shouldn't call your own route handlers from server components
European sprat
if you do, i think you need to use the full url like http://localhost:3000 etc
Answer
European sprat
but it's not something you should be doing
in the server component's POV, all APIs are external APIs. the server doesn't know its own domain/origin so "internal" API doesn't make sense
Whiteleg shrimpOP
Thanks for your answers, I got it working with the full url. 😄
Out of curiosity, haven't you been able to call apis with just /routename before?
@Whiteleg shrimp Thanks for your answers, I got it working with the full url. 😄 Out of curiosity, haven't you been able to call apis with just `/routename ` before?
Thanks for your answers, I got it working with the full url. 😄
Don't do that. That is a very bad practice.

Out of curiosity, haven't you been able to call apis with just /routename before?
that's from the browser, then you don't need the origin of the url
Whiteleg shrimpOP
So fetch("http:localhost:3000/api/productsisn't a good practice?
no it isn't a good practice
it's like you fetch your own api routes inside getServerSideProps, it doesn't work like you think it does