Dynamic routing with getStaticProps and getStaticPaths, unable to implement simple routing.

[davidgbell]

I'm tying to add projects I have made to my portfolio site using Airtable as a simple data base.

I have successfully fetched and displayed the projects and routed to each projects ID. However I am stuck on how to get the other data from that specific project and to display it. Statically.

Getting the data from Airtable functionality:

export async function getProjectsData() {
  const res = await fetch(
    `https://api.airtable.com/v0/${BASE_KEY}/Projects?api_key=${API_KEY}`
  );
  const airtable = await res.json();

  const projectData = await airtable.records
    .map(record => {
      return {
        name: record.fields.Name,
        notes: record.fields.Notes,
        siteURL: record.fields.SiteURL,
        codeURL: record.fields.CodeURL,
        screenshots: record.fields.Screenshots.map(img => img.url),
        tech: record.fields.Tech,
        id: record.fields.ID,
      };
    })
    .sort((a, b) => {
      if (a.id < b.id) {
        return -1;
      } else return 1;
    });
  return projectData;
}

Displaying the name of each project on homepage using getStaticProps()

          <ul>
            {projects.map((project, index) => (
              <li key={index}>
                <h3>{project.name}</h3>
                <Link href='/projects/[id]' as={`/projects/${project.id}`}>
                  <a>Find out more</a>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </main>
    </div>
  );
}
export async function getStaticProps() {
  const projects = await getProjectsData();

  return {
    props: {
      projects,
    },
  };
}

Using [id].js for a dynamic routing when clicking Link above for each project sent to this page but with dynamic slug.

export default function Project() {
  return (
    <div>
      <h1>This is a project</h1>
      <Link href='/'>
        <a>Home</a>
      </Link>
    </div>
  );
}

My problem is that I want the rest of my project data to be displayed on the Project page using dynamic routing and SSG.

Any help would be appreciated.

P.S I'm new to web development.

[timmysmalls]

Hey, I'm not entirely sure I understand your issue, but for what I can see you should add a getStaticProps call to the Project page. So your project detail page right now has a dynamic slug, but it just shows 'This is a project'. You want to change that, and get it to show all the information about that project.

The route is called [id]. This means that you have a url parameter called id that represents the ID of a certain project. So say you have three projects:

[
    {
        'id': 1,
        'name': 'My first project',
        'dateCreated': '01-01-2020',
        'description': 'Lorem ipsum ipsum lorem...',
    },
    {
        'id': 2,
        'name': 'My second project',
        'dateCreated': '01-03-2020',
        'description': 'Lorem ipsum ipsum lorem...',
    },
    {
        'id': 3,
        'name': 'My third project',
        'dateCreated': '01-03-2020',
        'description': 'Lorem ipsum ipsum lorem...',
    }
]

When people visit https://www.yoursite.com/1 you will want to show the information belonging to project 1. To do this you'll need to do two things. For starters, add a getStaticProps call to the project page you have (so the react component in [id].js). In that call you have fetch the data that belongs to a project. You will have access to context.params.id in the getStaticProps function. I noticed that you call getStaticProps liket this: getStaticProps(). You will want to change that to: getStaticProps(context). The context parameter holds many important values to make your call truly dynamic. The params property is one of them. You will need it to get the value that people passed in as [id]. You can use that id to fetch the information for that specific project. I see your getProjectsData call is quite complex for a simple API call. I think this one should be much easier. I'm not familiar with AirData, but I assume you can use an api call that looks a little something like this: https://api.airtable.com/v0/${BASE_KEY}/Projects/1?api_key=${API_KEY} -> notice this is almost the same call you did before, only this time I query Projects/1 instead of just Projects. In RESTful API conventions that will give you data on one specific project: the one with id = 1. You will want to make this dynamic, so the final API call should look something like this:

https://api.airtable.com/v0/${BASE_KEY}/Projects/${context.params.id}?api_key=${API_KEY}

That way the getStaticProps function gets the information for the project with the id that is passed in the URL. Next you need to add another function: getStaticPaths. In getStaticPaths you have to specify which routes to build using SSG. In our case we have three projects. 1, 2, and 3. Please check out the documentation on getStaticPaths. I'm also quite new to Next.js, but I've implemented this today. If you say you're new to web development just getting the first part to work may already be quite an achievement! So I'd implement that first, perhaps using getServerSideProps first, instead of getStaticProps, just to see if you get it right. After you get that part right, it's a small step to add the getStaticPaths call as well. Good luck.