type
status
date
slug
summary
tags
category
icon
url
sync
This website introduces how to build a blog using Notion and Next.js. The author shares their experience with Markdown and why they chose Notion as a CMS. By using react-notion and notion-api-worker, the author demonstrates how to render Notion pages as React components and create static blog pages with Next.js. The article also explains how to integrate Splitbee.io for blog analytics.
Judging from the website content, it is not free, pass (hah).
Key Features
- Choosing Notion as a CMS: Dissatisfied with the editing capabilities of Markdown, the author decided to use Notion's rich content editing features to build a blog.
- Creation of react-notion: Based on the Vercel Notion blog project and chorale.app, the author developed react-notion, an open-source React renderer that can render Notion content.
- notion-api-worker: To retrieve the blockMap of Notion pages, the author created a serverless wrapper based on Cloudflare Workers to provide fast responses.
- Next.js Project Setup: Set up the Next.js project using the guide provided by Vercel and integrate react-notion.
- Implementation of Blog Overview Page: Use getStaticProps to get all blog posts and display a list of links on the home page.
- Implementation of Blog Article Page: Get the content of a specific blog article through slug and render it using NotionRenderer.
- Next.js Routing and Styling: Implement getStaticPaths to support slug-based routing and introduce necessary CSS styles.
- Integration of Splitbee: The author introduces the analytics tool Splitbee.io and provides steps to integrate it into the blog.
- Getting Splitbee: Provides a link to sign up for Splitbee and shows how to add analytics scripts to the blog.
- Project Code: The website finally provides a complete code link on GitHub for readers to refer to.
- 作者:notion2go
- 链接:https://notion2go.com/article/react-notion-blog
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。