Un error que muestra
Error: Error al serializar
.myBlogsdevuelto desdegetServerSidePropsen "/blog".```
mientras estoy tratando de consolar datos! Mientras estaba obteniendo datos a través de useEffect() todo iba bien, pero ahora obteniendo datos con getServerSideProps arroja el error mencionado anteriormente.
Código:
import React, { useEffect, useState } from 'react' import styles from '../styles/Blog.module.css' import Link from 'next/link' import Navbar from '../components/Navbar' const blog = (props) => { console.log(props) const [blogs, setblogs] = useState([]); // useEffect(() => { // }, []) return <div> <Navbar /> <main className={styles.main}> <h2 className={styles.heading}> Latest Blogs :) {/* Get started by editing{' '} <code className={styles.code}>pages/index.js</code> */} </h2> <div className={styles.neat}> {blogs.map((blogitem) => { return <div className={styles.grid} key={blogitem.slug} > <Link href={`/blogpost/${blogitem.slug}`} > <a className={styles.card}> <h2>{blogitem.title} →</h2> <p>{blogitem.content.substr(0, 100)}...</p> </a> </Link> </div> })} </div> </main> </div> } export async function getServerSideProps(context) { let data = await fetch('http://localhost:3000/api/blogs'); let myBlogs = await data.json(); return { props: {myBlogs}, // will be passed to the page component as myBlogs } } export default blogComo sugirió @Bravo, debe await la llamada data.json() en la devolución de llamada getServerSideProps .
Además, debe desestructurar el objeto props para recibir los blogs cargados y mostrarlos.
Finalmente, es una buena práctica en React poner en mayúscula los nombres de los componentes:
const Blog = ({ blogs }) => { return <div> <Navbar /> <main className={styles.main}> <h2 className={styles.heading}> Latest Blogs :) {/* Get started by editing{' '} <code className={styles.code}>pages/index.js</code> */} </h2> <div className={styles.neat}> {blogs.map((blogitem) => { return <div className={styles.grid} key={blogitem.slug} > <Link href={`/blogpost/${blogitem.slug}`} > <a className={styles.card}> <h2>{blogitem.title} →</h2> <p>{blogitem.content.substr(0, 100)}...</p> </a> </Link> </div> })} </div> </main> </div> } export async function getServerSideProps(context) { let data = await fetch('http://localhost:3000/api/blogs'); let myBlogs = await data.json(); return { props: { blogs: myBlogs }, } } export default Blog