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

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

Instructor

Jon Meyers
30m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
218
people completed
Bookmark
Download
RSS

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.

Learner Reviews

  • Jumper
    7 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Quick and straight to the point

  • Learner
    9 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Next js new serversside proepr explinaton is asm

  • Learner
    9 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    This course beautifully showcases the implementation Next.js incremental static regeneration using the Notion API, showing how we can manage integrations, retrieve and edit data in Notion. Thanks.

  • Learner
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Need to update the Slug/Slugify section to include API update from "text" to "rich_text"

  • Learner
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Very short yet explains everything perfectly, even for someone that is completely new to next.js and integration with notion. Some of the data might be outdated, like the way to connect notion pages and databases is not through the share button anymore, but still useful information!

  • Yuri Malakhov
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    All good! A little bit too easy.

Course Content

30m • 8 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.