Request page data for Next.js from the Notion API
We will learn how to fetch page data from the Notion API, and build a static recipe website. We start with a page containing a list of recipes - each a link to its own recipe page - and use Next.js to create a pre-generated page listing our recipe titles.
In order to request data from our Notion API, we create a new integration and share the data from with page with it. We also learn about how to manage secret environment variables in our Next.js application, and how to conveniently pretty print the results from the getStaticProps function.
Lastly, we take the raw Notion data and transform it into a convenient array structure, that we can iterate over in our page component, and display in the browser.
"Could not find block with ID" message: To share data of the page with the integration, click on the 3 dots in the top right -> find "Add Connections" near the bottom -> search for the name of your connection in the box -> and select and confirm your connection's access to the database.
Dec 2023: The method to give integrations has changed since the course was published.
To give the integration permission, you will need to:
- Pick (or create) a Notion page.
- Click on the ... More menu in the top-right corner of the page.
- Scroll down to + Add Connections.
- Search for your integration and select it.
- Confirm the integration can access the page and all of its child pages.
Thrilled to be doing this course! I've been wanting to use Notion for a web project for a while now. This will be deployed at knittingpatterns.yarnhelp.com