Skip to content

README.en.md

Latest commit

 

History

History
131 lines (88 loc) · 2.85 KB

README.en.md

File metadata and controls

131 lines (88 loc) · 2.85 KB

NotionP

A clean, fast Notion-powered personal blog built with Next.js 14 + TypeScript.

Live Demo · 中文 README

Overview

NotionP is a blog template using a Notion Database as the CMS. It includes:

  • Post list with search & tag filtering
  • Post detail page rendered via react-notion-x
  • Global dark mode
  • Image proxy to mitigate Notion expiring signed URLs
  • Dynamic Open Graph image for social sharing previews

Screenshots

Home Post Detail

Tech Stack

  • Next.js 14 (Pages Router)
  • React 18
  • TypeScript
  • Tailwind CSS
  • react-notion-x / notion-client / notion-utils
  • next-themes (dark mode)

Quick Start (Local)

npm install

Create a local env file:

cp .env.local.example .env.local

Fill in:

NOTION_SECRET_KEY=secret_xxx

Start dev server:

npm run dev

Default URL:

Configuration

Site configuration lives in site.config.ts:

  • rootDatabaseId: Notion Database ID (post source)
  • name / domain / author / description
  • navigationLinks: top navigation

Notion Database Schema

NotionP expects these properties (case-sensitive):

  • Name: title
  • Abstract: summary (optional)
  • Tags: tags (Multi-select, optional)

It uses Notion created_time as the primary sorting key (newest first).

Deploy

One-click deploy (Vercel)

Deploy with Vercel

Required env vars:

  • NOTION_SECRET_KEY

Manual deploy (Recommended)

  1. Fork this repo
  2. Create a Notion Integration and copy the Secret Key
    https://www.notion.so/my-integrations
  3. Add the Integration to your Notion Database page (Connections)
  4. Update rootDatabaseId in site.config.ts
  5. Import the repo in Vercel and set NOTION_SECRET_KEY

FAQ

1) Terminal keeps showing /_next/static/chunks/*.js 404

This is usually caused by stale dev assets or port switching. Try:

rm -rf .next
npm run dev

Then hard refresh the browser (Cmd+Shift+R).

2) Notion images sometimes break

Some Notion image URLs are signed and expire. This project uses /api/image as a proxy with caching to reduce broken images.

License

MIT