Soy nuevo en Next.js y he estado tratando de usar getStaticProps en mis páginas dinámicas en mi aplicación Next.js y recibo este error:
Error: se requiere getStaticPaths para páginas SSG dinámicas y falta para '/query/[itmid]'
[itmid].jsx
function Query({ posts }) { return ( {posts.map((itm, k) => { return ( <> <Head> <title> {itm.Name} - wixten </title> </Head> <div key={itm._id} className="Question-one"> <h1> {itm.Name}</h1> <h2>{itm.Summary}</h2> </div> <div className="username"> <span className="username2">--{itm.username}</span> </div> </> ); })} </> <div className="multi-container"> <Answershooks id={gotid} /> <RealtedPost /> </div> </> ); } export async function getStaticProps() { const res = await fetch("https://ask-over.herokuapp.com/questone/" + gotid); console.log("check"); console.log("dada"); const posts = await res.json(); return { props: { posts, }, }; } export default Query;¿Por qué recibo este error?
Lo que hace getStaticProps es generar la página estática, pero debe decirle al siguiente js, ¿cuáles son las rutas para generar?
export async function getStaticPaths() { return { paths: [ { params: { query: 'slug-1' }}, { params: { query: 'slug-2' }} ], fallback: true // false or 'blocking' }; }Luego en su getStaticProp
export async function getStaticProps({ params }) { //params.query will return slug-1 and slug-2 const res = await fetch("https://ask-over.herokuapp.com/questone/" + params.query); console.log("check"); console.log("dada"); const posts = await res.json(); return { props: { posts, }, }; } Debe usar params.query si nombra su archivo [query].js .
Los códigos anteriores generarán rutas estáticas /slug-1 y /slug-1 .
Si no está tratando de generar páginas estáticas (lo que parece), entonces probablemente debería usar getServerSideProps que genera páginas sobre la marcha.