transitive-bullshit/nextjs-notion-starter-kit

★ 7,005TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Notion Blog Kit))
    What it does
      Notion as CMS
      Auto deploy Vercel
      No database needed
    Features
      Dark mode
      CMD K search
      Social previews
    Setup
      Clone and configure
      One config file
      Deploy to Vercel
    Tech Stack
      Next.js
      TypeScript
      React

mindmap root((Notion Blog Kit)) What it does Notion as CMS Auto deploy Vercel No database needed Features Dark mode CMD K search Social previews Setup Clone and configure One config file Deploy to Vercel Tech Stack Next.js TypeScript React

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Launch a personal blog or portfolio where you write all content in Notion and it publishes automatically.

USE CASE 2

Build a documentation site that non-technical teammates can update in Notion without touching any code.

USE CASE 3

Create a product landing page with copy that a designer or PM can edit in Notion without a developer.

Tech stack

TypeScriptNext.jsReactVercelNotionRedis

Getting it running

Difficulty · easy Time to first run · 30min

Vercel deployment protection must be disabled manually in the project dashboard to allow social media crawlers to fetch preview images.

In plain English

Next.js Notion Starter Kit is a template for building a personal website or blog where the content lives in Notion and the site is hosted on Vercel. The idea is that you write and organize your articles, projects, or portfolio pages inside a Notion workspace, and this template reads that content and turns it into a fast, public website without requiring you to touch a database or manage files. Setup is minimal. You clone or fork the repository, open a single configuration file called site.config.ts, and paste in the ID of your root Notion page. That page needs to be set to public in Notion so the site can read it. Then you run a deploy command and the site goes live on Vercel. Most of the settings that matter, such as the site title, description, navigation links, and optional features, are all controlled from that one config file. The site includes dark mode, a quick keyboard search (triggered by CMD+K), automatic table of contents on long pages, and automatically generated social preview images for sharing links on social media. Images on the site load with a smooth blur-up preview effect by default. URLs are generated from page titles automatically, and you can override them with a custom Slug property in your Notion database if you want specific URL patterns. For performance, the template supports optional caching of generated preview images through Redis. Without Redis, preview images are regenerated on each build, which can be slow for large sites. Redis caching is optional and disabled by default. The template also supports two analytics providers out of the box: Fathom Analytics and PostHog. Either can be enabled by adding the relevant environment variables. One thing worth noting: Vercel's default deployment protection setting will block social media crawlers from fetching preview images. The README includes instructions for disabling that setting in your Vercel project dashboard to avoid getting 401 errors when sharing links. The project is built with Next.js, TypeScript, and React, and it uses the react-notion-x library to render Notion content.

Copy-paste prompts

Prompt 1

I forked nextjs-notion-starter-kit and want to use my Notion page as my personal blog, walk me through filling out site.config.ts and deploying to Vercel.

Prompt 2

How do I add Redis caching for social preview images to my nextjs-notion-starter-kit site so previews don't regenerate on every build?

Prompt 3

I want to add PostHog analytics to my Notion-powered site, which environment variables do I add and where in site.config.ts?

Prompt 4

My social preview images return 401 errors when I share links, how do I fix Vercel deployment protection to allow social media crawlers?

Open on GitHub → Explain another repo

← transitive-bullshit on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.