DocUp

DocUp is a lightweight personal blog and knowledge base built with Next.js, React, and Notion. It pulls public posts from a Notion database or data source, renders them in a clean feed, supports searching and filtering by tags and categories, and includes a small AI assistant powered by OpenRouter.

• Notion-powered content source
• Searchable blog feed
• Tag filtering with /
• Category filtering with #
• Individual post pages with rich Notion block rendering
• Dark mode support
• AI chat assistant for filtering and content discovery

DocUp is designed to be easy to fork and adapt. If you want to run your own version, follow these steps:

1. Fork or clone this repository.
2. Duplicate this Template.
3. Install dependencies with npm install.
4. Create a Notion database.
5. Create a .env file with your Notion token and database ID.
6. Optionally add an OpenRouter API key if you want the AI assistant enabled.
7. Run npm run dev and start publishing posts.

You can use this as either:

• a personal blog
• a notes site
• a public writing archive
• a starter project for a Notion + Next.js app

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS
• Notion API
• OpenRouter API for chat

1. Install dependencies:

npm install

1. Create a .env file in the project root:

NOTION_TOKEN=your_notion_integration_token
NOTION_DATABASE_ID=your_notion_database_or_data_source_id
OPENROUTER_API_KEY=your_openrouter_key
OPENROUTER_MODEL=openrouter/auto

1. Start the development server:

npm run dev

1. Open http://localhost:3000 in your browser.

• NOTION_TOKEN: your Notion integration token
• NOTION_DATABASE_ID: the database ID (or data source ID) used by the app

• OPENROUTER_API_KEY: enables the AI assistant in the UI
• OPENROUTER_MODEL: overrides the default model, defaults to openrouter/auto

The app expects your Notion database to include properties that map to the fields used by the app:

• Title or Name: post title
• Slug: URL slug for the post
• Summary: short description shown on the feed/post page
• Type: optional post type
• Status: optional status; only Public entries are shown
• Date: optional publish date
• Thumbnail: optional cover image
• Tags: multi-select tags
• Category: select field for category

You can duplicate this structure in Notion and use it as the content source for DocUp.

Template

If you don't want to duplicate the template, you can still use your own Notion database as long as it has the same properties and naming.

Create a database with these properties:

• Title (title property)
• Slug (text)
• Summary (text or rich text)
• Type (select, optional; set to Post if you want)
• Status (select, optional; use Public for live posts)
• Date (date)
• Thumbnail (files & media)
• Tags (multi-select)
• Category (select)

Title: Why I switched to a custom blog
Slug: why-i-switched-to-a-custom-blog
Summary: Notes on shipping a minimal writing workflow with Notion.
Type: Post
Status: Public
Date: 2026-09-15
Thumbnail: optional cover image
Tags: [nextjs, writing]
Category: essays

1. In Notion, create an internal integration or use an existing one.
2. Share the database with that integration.
3. Copy the database ID.
4. Put it in NOTION_DATABASE_ID in .env.

• Keep Slug unique for each post.
• Use Status = Public only for posts you want visible in the feed.
• Use Status = Private or leave it blank for drafts, notes, or unpublished content.
• Use Category and Tags consistently so filtering feels useful.
• Put the content of each post in the page body; the app will render the Notion blocks automatically.
• Use Thumbnail for a hero image if you want one on the post page.

DocUp treats posts as public when Status is exactly Public.

• Public: appears in the homepage feed and can be opened directly
• Private: hidden from the feed and not shown publicly
• blank / unset: also hidden from the public feed

This makes it easy to keep draft posts, ideas, or private notes in the same Notion database without exposing them on the site.

The home page loads posts from Notion and renders them in a feed. The search input supports:

• plain text search across titles and summaries
• tag filtering using /, for example /nextjs
• category filtering using #, for example #essays

Each post has its own route at /[slug], where the app fetches the page and renders the Notion block content.

The assistant is available from the top bar. If OPENROUTER_API_KEY is missing, the app falls back to lightweight built-in guidance about using tags and categories instead of failing outright.

app/
  api/chat/route.ts
  [slug]/page.tsx
  components/
  lib/
    feed.ts
    notion.ts
    types.ts