Next.js – GetStaticPaths TypeError

Asked By: Anonymous

i have the following issue with getStaticPaths of Next.JS:

TypeError: cias.map is not a function
https://i.stack.imgur.com/IVZDp.png

Can someone help me with this, please?

Code:

import React from 'react'
import { Container } from '../../../styles/pages/container'
import { GetStaticProps, GetStaticPaths } from 'next'
import fetch from 'isomorphic-unfetch'

    export const getStaticPaths: GetStaticPaths = async () => {
      const res = await fetch('http://localhost:3000/api/infocadcias')
      const cias = await res.json()
    
      const paths = cias.map(cia => ({
        params: { id: cia.ID.toString() }
      }))
    
      return { paths, fallback: false }
    }
    
    export const getStaticProps: GetStaticProps = async ({ params }) => {
      const res = await fetch(`http://localhost:3000/infocadcias/${params.id}`)
      const cia = await res.json()
    
      return cia
    }
    
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    export default function InfoCia({ cia }) {
      return (
        <Container>
          <ul>
            {cia.map(p => (
              <li className="cia" key={p.ID}>
                <span>Name: {p.Name}</span>
              </li>
            ))}
          </ul>
        </Container>
      )
    }

Solution

Answered By: Anonymous

Edit: I answered the wrong question below, but you should still take a look at that. you are getting that error because cias is not an array. Try logging that variable and update your question with the result if you still don’t have a solution. It may be something like {cias: [...]} in which case you would need to change the map to cias.cias.map(...) OR destructure the variable on assignment const { cias } = await res.json()

In your getStaticProps function you are not returning in the proper format. You need to return an object with the props key like this:

{
  props: {
    cia: cia
  }
}

You can refer to the NextJS docs on getStaticProps here: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

If that doesn’t fix it, you should make sure that your await res.json() is returning an array.

Full example with update:

import React from 'react'
import { Container } from '../../../styles/pages/container'
import { GetStaticProps, GetStaticPaths } from 'next'
import fetch from 'isomorphic-unfetch'

    export const getStaticPaths: GetStaticPaths = async () => {
      const res = await fetch('http://localhost:3000/api/infocadcias')
      const { cias } = await res.json()
       
      const paths = cias.map(cia => ({
        params: { id: cia.ID.toString() }
      }))
    
      return { paths, fallback: false }
    }
    
    export const getStaticProps: GetStaticProps = async ({ params }) => {
      const res = await fetch(`http://localhost:3000/infocadcias/${params.id}`)
      const { cia } = await res.json()
    
      return {
        props: {
          cia: cia
        }
      }
    }
    
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    export default function InfoCia({ cia }) {
      return (
        <Container>
          <ul>
            {cia.map(p => (
              <li className="cia" key={p.ID}>
                <span>Name: {p.Name}</span>
              </li>
            ))}
          </ul>
        </Container>
      )
    }
    ```