He estado tratando de construir esta aplicación de blog, Before está bien y en el entorno de desarrollo también está bien. Pero, tan pronto como intento construirlo para producción, aparece este error.
Se produjo un error al renderizar previamente la página "/blogs/[slug]". Leer más: https://nextjs.org/docs/messages/prerender-error TypeError: no se puede leer la propiedad 'título' de undefined
Estoy confundido porque esta aplicación se había creado antes y nada está mal. Este es el culpable:
import Head from "next/head"; import "bootstrap/dist/css/bootstrap.min.css"; import ReactMarkdown from "react-markdown"; import moment from "moment"; const Post = ({ posts }) => { return ( <> <Head> <title>{posts && posts.title}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" ></meta> </Head> <div className="container" style={{ marginTop: "3.85rem" }}> <div className="row"> <h1>{posts.title}</h1> </div> <div className="row d-flex justify-content-end"> <p style={{ textAlign: "right" }}> {moment(posts.dateTime).format("dddd, Do MMMM YYYY, hh:mm:ss a")} </p> </div> <br /> <div className="row d-flex justify-content-center"> <img className="postThumbNail" src={posts.thumbnail.url} alt={posts.thumbnail.url} /> </div> <br /> <ReactMarkdown>{posts.body}</ReactMarkdown> </div> </> ); }; export async function getStaticProps({ params: { slug } }) { const res = await fetch( `https://someapi.com/blogs?slug=${slug}` ); const blogPost = await res.json(); return { props: { posts: blogPost[0], }, revalidate: 600, }; } export async function getStaticPaths() { // Get Post From Strapi const res = await fetch( "https://someapi.com/blogs" ); const post = await res.json(); // Retrun Enrich Content return { paths: post.map((posts) => ({ params: { slug: String(posts.slug) }, })), fallback: true, }; } export default Post;Solución 1 Primero debe verificar si el atributo existe
<h1>{posts?.title}</h1> La solución 2 o el objeto no es nulo return null hasta que se cargan los datos
if(!posts) return null return <div> ...Code </div> <Head> <title>{posts && posts.title}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" ></meta> </Head> <div className="container" style={{ marginTop: "3.85rem" }}> <div className="row"> <h1>{posts && posts.title}</h1> // You've just forgot that if posts exist condition </div> <div className="row d-flex justify-content-end"> <p style={{ textAlign: "right" }}> {moment(posts.dateTime).format("dddd, Do MMMM YYYY, hh:mm:ss a")} </p> </div> <br /> <div className="row d-flex justify-content-center"> <img className="postThumbNail" src={posts.thumbnail.url} alt={posts.thumbnail.url} /> </div> <br /> <ReactMarkdown>{posts && posts.body}</ReactMarkdown> </div>