Fetching data Next.js and Typescript using getStaticProps

Question

I am doing a personal project on Next.js with TypeScript. I am trying to fetch an api and then to do a map of the items, but I cannot make it work. I did a console.log and it gives undefined. I did put the file on the pages folder. This is the code:

import { InferGetStaticPropsType } from 'next'

type Data = {
    id: string
    films: string
    people: string
    planets: string
    species: string
    vehicles: string
 }

export const getStaticProps = async () => {
    const res = await fetch('https://www.swapi.tech/api/')
    const swapis: Data[] = await res.json()
  
    return {
        props: {
          swapis,
        },
    } 
}
 
const FilmList = ({ swapis }: InferGetStaticPropsType<typeof getStaticProps>) => {
    console.log('swapis', swapis)
    return (
        <>
        <h2>List of Films</h2>
        {swapis.map((swapi) => (
            <ul key={swapi.id}>
                <li>{swapi.films}</li>
            </ul>
        ))}
        </>
    );
}
 
export default FilmList;

Joris · Accepted Answer · 2021-12-17 07:07:08Z

4

Your Data type is wrong. You're calling https://www.swapi.tech/api/ which returns

{
  "message": "ok",
  "result": {
    "films": "https://www.swapi.tech/api/films",
    "people": "https://www.swapi.tech/api/people",
    "planets": "https://www.swapi.tech/api/planets",
    "species": "https://www.swapi.tech/api/species",
    "starships": "https://www.swapi.tech/api/starships",
    "vehicles": "https://www.swapi.tech/api/vehicles"
  }
}

Full working example:

import { InferGetStaticPropsType } from 'next';

type Data = {
  message: string;
  result: {
    id: string;
    films: string;
    people: string;
    planets: string;
    species: string;
    vehicles: string;
  };
};

export const getStaticProps = async () => {
  const res = await fetch('https://www.swapi.tech/api/');
  const swapis: Data = await res.json();

  return {
    props: {
      swapis,
    },
  };
};

const FilmList = ({ swapis }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <>
      <h2>List of Films</h2>
      {Object.entries(swapis.result).map(([key, value]) => (
        <ul key={key}>
          <li>{value}</li>
        </ul>
      ))}
    </>
  );
};

export default FilmList;

answered Dec 17, 2021 at 7:07

Joris

2,83618 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joaquin Palacios Over a year ago

Thanks @Joris , but I got this error on screen "TypeError: Cannot convert undefined or null to object". The error on the screen it is here: "{Object.entries(swapis.result).map(([key, value]) => ("

Joris Over a year ago

Can you share a codesandbox and repo please? I tried on my side with my code and it works

Joaquin Palacios Over a year ago

I just did it on Sandbox. This is the link: codesandbox.io/s/crazy-minsky-cy9rg

Joris Over a year ago

You're not using a nextjs as expect. You might read the doc. You created the /data page to display data. You can access by its url: cy9rg.sse.codesandbox.io/data It's not recommended to import page in another one.

Joris Over a year ago

Working example codesandbox.io/s/ecstatic-forest-m3mjf?file=/pages/index.tsx

Collectives™ on Stack Overflow

Fetching data Next.js and Typescript using getStaticProps

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related