Basically, I am trying to access some json placeholder data via my route handler defined in /api/posts/route.js
export async function GET() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await res.json();
return Response.json({ data: data });
}
I know that this part is OK because when I navigate to
http://localhost:3000/api/posts
a whole json object with this data appears on the page.
However, when I am trying to get this data via console logging in my
/posts/page.jsx
file, it just logs an empty object. Does anyone know what’s going on here? Thanks!
import React from 'react';
export async function getPosts() {
const res = await fetch('http://localhost:3000/api/posts');
const data = await res.json();
return data.data;
}
const Post = async () => {
const posts = await getPosts();
console.log(posts);
return (
<div>
<h1>Hello</h1>
</div>
);
};
export default Post;