mostly yes. also depends

if u use something like react query, then API route is not required

Here is my code . I can't see data on the console

I just want to fetch data and display it on the client component . What should I do?

do await on res.json() as well

you are returning a promise there, not the data from it.

you should not declare keys directly in the code. use env

then you would really need API route for security and pass along the env variable to getData function.( unless there's a better way to do this)

I'm creating this project for practice, how can I display data on the screen?

Do await on res.json()

const data = await res.json();
return data;

If this doesn't work, check if your api even works

In browser or postman

Also, you could put the fetch code inside try catch to see the error

Okay

Api is working fine in route.js but when I tried to fetch data in page and display it, it is showing some error

Here is error

Here is a code

You can't render out json in html directly

Please check up data fetching and returning objects/arrays docs

Can you share the link?

Or some examples?

Isn’t that an api key in your photo?

Yes

I am just using a free api for practice

You have to destructure your return value using Object.entries and then map it over if it's an array.

It totally depends on what kind of data you receiving

The api you are using will also give you a doc on how to fetch and render data

Okay got it

Finally done😭 thanks bro👍