Creé un proyecto a partir de create-next-app. Dentro de la página de Blog.js intenté obtener de https://jsonplaceholder.typicode.com/posts usando la función getStaticProps() .
Usé la guía https://nextjs.org/docs/basic-features/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms . Una vez implementado todo, abro la página en el navegador y me dice
Server Error TypeError: Cannot read properties of undefined (reading 'map')Aquí está el código
function Blog({ posts }) { return ( <ul> {posts.map((post) => ( <li>{post.title}</li> ))} </ul> ) } export async function getStaticProps() { const res = await fetch('https://jsonplaceholder.typicode.com/posts') const posts = await res.json() return { props: { posts, }, } } export default Blogestá escribiendo la función dentro del componente que desea representar. La única situación en la que va a hacer esto es cuando está creando URL dinámicas basadas en algún parámetro, en ese caso usará getStaticProps y getStaticPages combinados.
intenta hacer algo como esto:
function Blog({ posts }) { return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ) } export default Blog import type { NextPage } from "next"; import Blog from 'wherever it is' const Home: NextPage = ({posts}) => { return ( <> <Blog posts={posts}/> </> ); }; export async function getStaticProps() { const res = await fetch('https://jsonplaceholder.typicode.com/posts') const posts = await res.json() return { props: { posts, }, } } export default Home;Ps.: cuando esté usando el mapa, nunca olvide la propiedad clave;) Espero que pueda ayudarlo, abrazos desde Brasil.