getStaticPaths 和 getStaticProps 返回任何東西

Question

我是 nextJS 的初學者，這是我第一次嘗試使用 getStaticPaths 和 getStaticProps，有人能幫我解決這個問題嗎？

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 沒有返回任何東西，我的整個頁面都是白色的......😔

Answer 1

在這種情況下，我應該使用這樣的地圖功能

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>
                )}
            </>
        )
    }