Repolode
Submit
transitive-bullshit

transitive-bullshit/nextjs-notion-starter-kit

A Next.js starter kit that turns a public Notion page into a deployable blog or portfolio site, built on react-notion-x and Vercel.

Open-source alternative to:Notion Sites

View on GitHubWebsite
Stars
7,040
Forks
5,637
Open issues
154
Last commit
19 days ago

What is it?

Next.js Notion Starter Kit uses Notion as a content management system. You point the site at a public Notion page by its ID, and the app renders that page's content, including nested pages and databases, as a website. Rendering of Notion blocks is handled by react-notion-x, and the site is designed to deploy on Vercel.

Setup centers on a single configuration file, site.config.ts, where the root Notion page ID is the main required value. Pages get automatic pretty URLs, a table of contents with scroll tracking, generated Open Graph social images, dark mode, and command-K style search. Optional Redis caching can store generated preview images to speed up builds, and Fathom or PostHog analytics can be enabled through environment variables.

The project requires Node.js 22 or newer and is managed with pnpm. Styling for Notion content lives in a CSS file that targets react-notion-x classes and per-block class names.

Key features

  • 01Uses a public Notion page as the content source, configured through one file.
  • 02Renders Notion content through react-notion-x.
  • 03Generates pretty URLs and social preview images automatically.
  • 04Includes a scrollspy table of contents and dark mode.
  • 05Supports optional Redis caching and Fathom or PostHog analytics.

Use cases

  • Launching a personal blog where articles are written in Notion.
  • Building a portfolio or project showcase site managed from a Notion database.
  • Publishing documentation or a public knowledge base from Notion pages.

Quick start

  1. 1

    Fork or clone the repo and set rootNotionPageId in site.config.ts

  2. 2

    Install dependencies (requires Node.js 22 or newer)

    pnpm install
  3. 3

    Run the local dev server to test

    pnpm dev
  4. 4

    Deploy to Vercel

    pnpm deploy

Things to know

  • Your root Notion page must be public for the site to work.
  • Social preview images require disabling Vercel Authentication, or crawlers receive 401 errors.
  • Preview image generation can be slow unless you set up an external Redis instance.

Topics

#notion#nextjs#react#blog#portfolio#cms#vercel#typescript#react-notion-x

FAQ

What is nextjs-notion-starter-kit?
A Next.js starter kit that turns a public Notion page into a deployable blog or portfolio site, built on react-notion-x and Vercel. Next.js Notion Starter Kit uses Notion as a content management system. You point the site at a public Notion page by its ID, and the app renders that page's content, including nested pages and databases, as a website. Rendering of Notion blocks is handled by react-notion-x, and the site is designed to deploy on Vercel.
Is nextjs-notion-starter-kit free to use? What license does it have?
nextjs-notion-starter-kit is open source under the MIT license. Check the license terms before using it in commercial products.
Is nextjs-notion-starter-kit still maintained?
Actively maintained. The last commit to nextjs-notion-starter-kit was on Oct 18, 2026.
What can I use nextjs-notion-starter-kit for?
Launching a personal blog where articles are written in Notion. Building a portfolio or project showcase site managed from a Notion database. Publishing documentation or a public knowledge base from Notion pages.
How do I install nextjs-notion-starter-kit?
Fork or clone the repo and set rootNotionPageId in site.config.ts Install dependencies (requires Node.js 22 or newer): pnpm install Run the local dev server to test: pnpm dev Deploy to Vercel: pnpm deploy
Where can I get nextjs-notion-starter-kit?
The source code and installation instructions are on GitHub: https://github.com/transitive-bullshit/nextjs-notion-starter-kit

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects