Next.js - GetStaticPaths TypeError - node.js

Question

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>
)
}

Answer 1

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>
)
}
```