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

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

Instructor

Jon Meyers

30m closed-captioning
·
8 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
218
people completed
Published 3 years ago
|
Updated 3 years ago

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.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

30m • 8 lessons

    You might also like these resources:

    illustration for Build a Real-Time Data Syncing Chat Application with Supabase and Next.js
    Kristian Freeman • 2h 1m • Course

    Learn to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase.

    illustration for Build a site from scratch with Next.js, TypeScript, Emotion and Netlify
    Tomasz Łakomy ・37m ・Course

    In this course, we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock • 1h4m • Course

    Accept payments & sell products powered by Stripe and the best of the JAMStack.