Use the Notion API to request block data in Next.js

Next.js

Share this video with your friends

In this video we will learn how to use Notion's client library to request block data and display the details of each of our recipes.

We will be pre-generating these static pages at build-time by using Next.js' getStaticProps function, however, because our recipe IDs can be a nearly infinite number of options, we need to explicitly tell Next.js every possible option we would like to create a static page for.

In order to do this, we use Next.js' getStaticPaths function. This allows us to make a request to the Notion API for all of our recipes, and provide Next.js with a finite collection of possible paths.

Brian

~ 3 years ago

The Github link on this page is broken.

Jon Meyers(instructor)

~ 3 years ago

Thanks for letting me know! It looks like a few of the lessons' GitHub URL's are missing the branch. I will get this fixed up now!

In the mean time, here is the link for this one 🙂

https://github.com/dijonmusters/notion-api-egghead-course/tree/master/03-request-block-data

Jon Meyers(instructor)

~ 3 years ago

All fixed now 👍 Thanks again for letting us know!

Itelo Filho

~ a year ago

Error message: Invalid <Link> with <a> child. https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

Liz GingerKiwi.Dev

~ 11 months ago

Still really enjoying the course.

Update for this section at: 1:24 Next.js no longer uses <a> tags inside links (Note: I'm doing a knitting pattern site instead of recipes)

<p key={pattern.id}> <Link href={`/patterns/${pattern.id}`}> {pattern.title} </Link> </p>