Error when fetching `/api/revalidate/ticker` but `http://localhost:3000/api/revalidate/ticker` works
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
Throws out a type error in the logs
src/app/layout.tsx const res = await fetch("/api/revalidate/ticker", {
cache: "no-store",
});
const data: CoinTicker = await res.json();src/app/api/revalidate/ticker/route.tsimport { NextResponse } from "next/server";
export async function GET() {
const res = await fetch(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=nano",
{
headers: {
"Content-Type": "application/json",
},
}
);
const json = await res.json();
const data = json[0];
return NextResponse.json({ data });
}6 Replies
@Cape lion Throws out a type error in the logs
`src/app/layout.tsx`
TSX
const res = await fetch("/api/revalidate/ticker", {
cache: "no-store",
});
const data: CoinTicker = await res.json();
`src/app/api/revalidate/ticker/route.ts`
TS
import { NextResponse } from "next/server";
export async function GET() {
const res = await fetch(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=nano",
{
headers: {
"Content-Type": "application/json",
},
}
);
const json = await res.json();
const data = json[0];
return NextResponse.json({ data });
}
You shouldn't do data fetching that invokes a route handler in a server component. Please call the function directly from the component.
@fuma You shouldn't do data fetching that invokes a route handler in a server component. Please call the function directly from the component.
Cape lionOP
Should I use the pages dir for other potential apis?
Why? The new app dir already can do most of the things in pages dir
@fuma Why? The new app dir already can do most of the things in pages dir
Cape lionOP
For handling an api that stores the last time that the site has been requested
You can use Route Handlers instead: https://nextjs.org/docs/app/building-your-application/routing/router-handlers