Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Build Static Pages Dynamically using Next.js and the Notion API

via egghead.io

Overview

Notion is a note taking application that empowers super productive workflows, without compromising on beautiful UI or intuitive UX. Next.js is a React framework that sprinkles in server-side logic in the places it is needed. This allows each page to be dynamically rendered by the client, rendered by the server or entirely static and rendered at build-time. This makes it an incredibly flexible option that can start off as simple as create-next-app and incrementally introduce complexity as the application evolves.
In this course, you will learn how to pre-render static pages with data from the Notion API. We will cover querying page, block and database data, as well as updating properties with mutations, and some helpful techniques for transforming raw responses into convenient data structures for our React components. Using Incremental Static Regeneration (ISR), we will learn about dynamically creating static pages any time new data is available in Notion.
We will be building two example applications - a recipe app and a movie picker. The data for these applications will live in Notion, and be queried by Next.js at build time. This allows us to use Notion for its delightful authoring experience, and Next.js to make this data publicly available via super performant static pages.

Syllabus

  • Pre-Generate Static Pages with Next.js
  • Request page data for Next.js from the Notion API
  • Use the Notion API to request block data in Next.js
  • Use slugified titles for URL in Next.js with the Notion API
  • Request Notion database data from the API with Next.js
  • Request paginated data from Notion API with Next.js
  • Mutate database fields with Next.js using the Notion API
  • Use Next.js Incremental Static Regeneration to pregenerate Notion API pages on-demand

Taught by

Jon Meyers

Reviews

4.8 rating at egghead.io based on 75 ratings

Start your review of Build Static Pages Dynamically using Next.js and the Notion API

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.