Skip to content
Get packs

NotionNext

Publish Notion pages as a website using Next.js, with no server of your own to run.

GitHub Download v4.11.1
Stars
11.9k
Forks
14.7k
Licence
MIT
Language
JavaScript
Last update
4 days ago
Type
App

What it is

NotionNext is an open-source site system that turns content you write in Notion (posts, categories, tags, menus, pages) into a public website. It is built with Next.js and the Notion API, and the README describes deploying it to Vercel after forking the repository. People use it to run blogs, portfolios, documentation sites, product landing pages and link directories while keeping Notion as their writing tool.

  • Publish a personal blog whose posts are written and managed in Notion
  • Build a documentation or knowledge-base site using the gitbook or claude themes listed in the README
  • Create a navigation or resource directory site with the nav theme
  • Set up a portfolio using themes such as opc or proxio

Great for

  • Writers who already keep their posts in Notion and want a website without moving content
  • Developers who want a customizable Next.js site they can modify and extend
  • Small teams that need a product landing page or knowledge base quickly
  • Creators who want a photo or portfolio site using one of the built-in themes

Not ideal for

  • People who want a no-code site with no setup, since the README describes forking a repo and configuring environment variables
  • Users who need to run everything on their own server, because the README's deployment path centers on Vercel
  • Anyone unwilling to install Node.js 22 for local development, since the README says Node 20 cannot install current dependencies
Step-by-step guide: how to use NotionNextInstall, first run, examples, tips and FAQs
NotionNext alternativesNextChat vs NotionNextCal.diy vs NotionNextNotionNext vs Taxonomy

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js 22 · Yarn 1 · Git

    Use Node 22

    nvm use || nvm install

    Install Yarn

    npm i -g yarn

    Install dependencies

    yarn

    Start local dev server

    yarn dev
  2. 2

    Run it

    • Open the theme preview site at preview.tangly1024.com to see options
    • Copy the official NotionNext Notion template
    • Fork the repository on GitHub and deploy it through Vercel
    • Set the Notion page ID and other settings in the environment variables
    • Run yarn dev locally to test changes
  3. 3

    Get the most out of it

    • Pick a theme for your use case using the scenario table in the README (blog, docs, portfolio, store, photo, nav)
    • Add comments via the supported options listed in the README: Twikoo, Giscus, Gitalk, Cusdis or Utterances
    • Use the built-in support for custom domains, SEO, sitemap, RSS, search, analytics and email subscription described in the README
    • Read the feature and configuration index in the online docs before customizing

Downloads

Source code (.zip)main branch · straight from GitHubRelease v4.11.1Release notes and sourceOfficial website & docsnotionnext.tangly1024.com

Strengths

  • Keeps writing in Notion while the site handles publishing
  • Ships with 26 built-in themes according to the README
  • Source code and configuration live in your own repository, so it can be modified

Trade-offs

  • Setup requires forking, connecting Vercel and filling in environment variables, which takes technical comfort
  • README is primarily in Chinese; the English version is a separate file (README_EN.md) not included in the excerpt
  • Local development needs Node 22 and Yarn 1, and deployment platforms must also be set to Node 22

How it compares

ProjectStarsTypeLevelUpdatedBest for
NotionNext (this)11.9kAppintermediate4 days agoWriters who already keep their posts in Notion and want a website without moving content
taxonomy19.3kAppadvanced7 months agoDevelopers learning the Next.js App Router and server components
cal.diy49.6kAppadvanced4 days agoIndividuals who want to self-host their own booking page
NextChat88.9kAppbeginner17 days agoPeople who want one chat window for several AI models
next.js143kFrameworkintermediate4 days agoDevelopers already comfortable with React who want a full framework around it
ui127kLibraryintermediate4 days agoDevelopers building React or Next.js interfaces who want full control over component code

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.