Soy un principiante en nextJS y este es mi primer intento usando getStaticPaths y getStaticProps, ¿alguien podría ayudarme con este problema?
const datas = [ { id: 1, name: "Banheiro", image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/BANHEIRO/3_oyr2yf.jpg", }, { id: 2, name: "Cozinha", image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/COZINHA/2_aenaut.jpg", }]; export const getStaticPaths = async () => { const paths = datas.map(mod => { return { params: { id: mod.id.toString() } } }); return { paths, fallback: false } } export const getStaticProps = async (context) => { const id = context.params.id; const data = datas.filter((mod) => mod.id.toString() === id) return { props: { datas: data } } } export default function Projects({ datas }) { return ( <> <h1> {datas.id} </h1> </> ) }datas.id no devuelve nada, toda mi página es blanca... 😔
En este caso, debería haber usado una función de mapa como esta
const datas = [ { id: 1, name: "Banheiro", image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/BANHEIRO/3_oyr2yf.jpg", }, { id: 2, name: "Cozinha", image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/COZINHA/2_aenaut.jpg", }]; export const getStaticPaths = async () => { const paths = datas.map(mod => { return { params: { id: mod.id.toString() } } }); return { paths, fallback: false } } export const getStaticProps = async (context) => { const id = context.params.id; const data = datas.filter((mod) => mod.id.toString() === id) return { props: { datas: data } } } export default function Projects({ datas }) { return ( <> {datas.map((data) => <h1> {data.id} </h1> )} </> ) }