CODEWITHSUNDEEP
reactjsnext.jsnext.js13getstaticpropsgetstaticpaths
SuperNunb
SuperNunb

Reputation: 141

Next.js 13 getStaticProps trouble with data fetching (newbie)

I'm newish to Next.js and the rest of React and was using it (and Tailwind CSS) on a project. I was working with getStaticProps to grab data from a json file and display different sections of it on different pages using dynamic routes. I have much of the project working, but I can't get it to get the data piped all the way through from the json file to the frontend of the final webpage. My theory is that the problem lies in getStaticProps, although of course I could be wrong.

I have the following /app/projects/[fname]/page.js:

import allProjects from '../../projectData.json';

function getProjectData({projectName}) {
    let projectData = null;
    for (const entry of allProjects) {
        if (entry.fname === projectName) {
            projectData = entry;
            break;
        }
    }
    return projectData;
}

export async function getStaticPaths() {
    const paths = allProjects.map(project => {
        return {
            params: {
                fname: project.fname
            }
        }
    });

    return {
        paths: paths,
        fallback: false
    }
}

export async function getStaticProps(context) {
    
    const {params} = context;
    let data = getProjectData(params.fname);

    return {
        props: {
          title: data.title,
          desc: data.desc,
          img: data.img,
          github: data.github,
          link: data.link,
        }
    }
}

export default function Page({title, desc, img, github, link}) {

    return (
    <div className='grid grid-cols-6 m-1'>
        <ul className='m-4'>
            <li>Title: {title}</li>
            <li>Desc: {desc}</li>
            <li>Img: {img}</li>
            <li>GitHub: {github}</li>
            <li>Link: {link}</li>
        </ul>
    </div>
    );
}

And the following /app/project.json:

[
    {
        "title": "thing0",
        "fname": "thing0",
        "desc": "hi there this the description",
        "img": "here image path",
        "github": "here github url",
        "link": "here other link if available"
    },
    {
        "title": "thing1",
        "fname": "thing1",
        "desc": "hi there this the description",
        "img": "here image path",
        "github": "here github url",
        "link": "here other link if available"
    },
    {
        "title": "thing2",
        "fname": "thing2",
        "desc": "hi there this the description",
        "img": "here image path",
        "github": "here github url",
        "link": "here other link if available"
    }
]

This is the result I get. As you can see, it seems to count each one as null or something. image of the problem

Any thoughts? Thank you!

Upvotes: 0

Views: 1100

Answers (1)

SuperNunb
SuperNunb

Reputation: 141

Thank you to juliomaves and Yilmaz, that helped and it finally works! after a lot of refactoring to the new v13 ways of doing things. I must have had some sort of frankenstein of new and old going on before.

For anyone wondering the answer was a lot of small tweaks I don't remember fully, but the big highlights were straight up deleting the getStaticProps and getStaticPaths like they said. I replaced each one with the new way of doing things found in the docs:

https://nextjs.org/docs/app/building-your-application/routing#the-app-router https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration https://nextjs.org/docs/app/api-reference/functions/generate-static-params https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#sequential-data-fetching

Upvotes: 1

Related Questions