GithubHelp home page GithubHelp logo

dueen / notion-nextjs-blog Goto Github PK

View Code? Open in Web Editor NEW

This project forked from delbaoliveira/notion-nextjs-blog

1.0 0.0 0.0 80 KB

A proof of concept for a blog using Next.js and the new Notion API. ✨

JavaScript 100.00%

notion-nextjs-blog's Introduction

A proof of concept for a blog using Next.js and the new Notion API. ✨

How it works:

  1. Blog posts are stored as Notion pages in a database (full page table).
  2. A Notion integration generates a token to authorize access to the database.
  3. A client is initialized using the Notion SDK.
  4. For this specific example, only pages marked as published in the table properties are fetched using the API's filter param.
  5. getStaticProps() uses incremental static regeneration to update pages in the background (more info).
  6. Dynamic pages are generated using Notion's page ids.

Considerations:

  • The Notion API currently only supports text blocks and these need to be fetched separetely from pages.
  • Text blocks are returned as strings and need to be styled with CSS to recreate the rich text format.
  • Currently there is no support for custom post URLs as you can only query posts by id.

To dos:

  • Add support for nested blocks.
  • Format dates.
  • Sort posts by published date.
  • Figure out how create custom slugs. 🐌

notion-nextjs-blog's People

Contributors

delbaoliveira avatar dueen avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.