Next.js Discord

Discord Forum

How to type Await/async fetch request from an API?

Red-billed Tropicbird posted this in #help-forum
Open in Discord
Red-billed TropicbirdOP
I am trying to practice API fetch requests, using the following known API:

I was wondering how to properly type the await res.json() part of the fetch Response and this is what I came up with:
interface Geo {
  lat: string
  lng: string

interface Address {
  street: string
  suite: string
  city: string
  zipcode: string
  geo: Geo

interface Company {
  name: string
  catchPhrase: string
  bs: string

interface User {
  id: number
  name: string
  username: string
  email: string
  address: Address
  phone: string
  website: string
  company: Company

async function UsersPage() {
  const res: Response = await fetch(
  const users: User[] = await res.json()
  return <div>UsersPage</div>

export default UsersPage

Is this a proper way to type it? Or what is the most idiomatic way of handling the fetch response?

2 Replies

Red-billed TropicbirdOP
or should I use Type instead of Interface?
Rizky 🙃
that or using zod to enforce it is actually that type is the common methods