Skip to content
Get packs

Guide · Open source

How to use NotionNext: set up a Notion-powered website

Updated · written with AI from the project's own documentation and checked against our catalogue data

NotionNext is an open-source site system that publishes the posts, categories, tags, menus and pages you keep in Notion as a public website, built with Next.js and the Notion API. This guide covers what it is good for, the local setup commands from the project README, the Vercel deployment path, and how to choose a theme. By the end you will know whether it fits your project and how to run it on your own machine.

NotionNextnotionnext-org/NotionNext · ★ 11.9k · MIT

Quick start

  1. 1Check your Node version. Use Node 22 with nvm use, or install it with nvm install. Node 20 cannot install current dependencies.
  2. 2Install Yarn. Run npm i -g yarn to install Yarn 1 globally.
  3. 3Clone and install dependencies. Clone the repository, open its folder and run yarn to install dependencies.
  4. 4Start the dev server. Run yarn dev to start local development.
  5. 5Prepare your Notion content. Copy the official NotionNext Notion template and write posts, categories, tags and pages in Notion.
  6. 6Deploy to Vercel. Fork the repository, connect it to Vercel and set environment variables such as the Notion page ID.
  7. 7Pick a theme. Choose one of the 26 built-in themes that matches your site type and preview it online first.

What is NotionNext and who is it for?

NotionNext turns content you write in Notion into a website. You keep managing articles, categories, tags, menus and pages in Notion, and NotionNext publishes them. It is built with Next.js and the Notion API.

It suits writers who already keep posts in Notion, developers who want a customizable Next.js site, small teams that need a product landing page or knowledge base, and creators who want a photo or portfolio site using a built-in theme.

  • Blogs, portfolios, documentation sites, product landing pages and link directories are the uses named in the project analysis.
  • The README says the project is MIT licensed and written in JavaScript.

Check the prerequisites before you start

For local development the README recommends Node.js 22 and Yarn 1, plus Git to clone the repository. It states that Node 20 cannot install current dependencies, so you should not use it.

If you deploy to Vercel, set the platform's Node version to 22 as well.

  • Node.js 22
  • Yarn 1
  • Git

Install and run NotionNext locally

Clone the repository, then run the commands below from the project folder. The README lists them in this order: select Node 22, install Yarn, install dependencies, then start the dev server.

The README also lists yarn build for a production build and yarn export for a static export.

nvm use || nvm install npm i -g yarn yarn yarn dev

Deploy your site on Vercel

The README's deployment path centers on Vercel. The quick route is to copy the official NotionNext Notion template, fork the repository to your GitHub account, and deploy it with Vercel.

During setup you fill in environment variables, including your Notion page ID. After deployment, add your domain, comments, analytics and search as needed. The README links a dedicated Vercel deployment guide in its documentation.

  • Copy the official NotionNext Notion template.
  • Fork the repository on GitHub.
  • Deploy with Vercel and set environment variables such as the Notion page ID.
  • Set the Node version to 22 on the platform.

Choose a theme

NotionNext includes 26 built-in themes. The README groups them by goal, so you can start from the one closest to your site type. You can preview themes online before choosing.

  • Personal blog: simple, hexo, nobelium, typography
  • Docs or knowledge base: gitbook, claude, thoughtlite
  • Portfolio: opc, proxio, starter, landing
  • Product site: starter, landing, commerce
  • Photo: photo, plog, magzine
  • Navigation site: nav

Extend the site and keep your content portable

Because the source code, configuration and themes live in your own repository, you can modify them. The README lists support for custom domains, SEO, sitemap, RSS, comments, statistics, search, ads and email subscription.

The README also notes that Notion holds your content, so it can later move to Markdown or another system.

  • Comments: Twikoo, Giscus, Gitalk, Cusdis, Utterances
  • Rendering is handled by react-notion-x and styling by Tailwind CSS

What people use it for

  • Run a personal blog that publishes posts written in Notion.
  • Build a portfolio or photo site using a built-in theme.
  • Launch a product landing page for a small team.
  • Create a documentation or knowledge base site.
  • Publish a navigation or link directory.

Frequently asked questions

Is NotionNext free?

The README describes the project as free and public resource for personal learning and lawful site building, and the repository is MIT licensed. Your hosting costs depend on the platform you deploy to, which the README does not price.

Do I need to install Node.js to use NotionNext?

For local development, yes. The README recommends Node.js 22 and Yarn 1. If you only deploy to Vercel, you still need to set the platform's Node version to 22.

Why does NotionNext fail to install on Node 20?

The README says Node 20 cannot install current dependencies because @ai-sdk/google requires Node 22 or later. Switch to Node 22 with nvm use or nvm install.

Can I run NotionNext without a server of my own?

The README's deployment path centers on Vercel, and the project description says no self-hosted server is required. Self-hosting on your own server is not covered in the material provided.

How is NotionNext different from Nobelium or Elog?

NotionNext is a Next.js site system with 26 built-in themes that publishes directly from Notion. Nobelium is the project the README credits as its origin, and Elog is a Markdown batch export tool that moves content into blog platforms such as Hexo or WordPress.

Do I need to write code to use NotionNext?

Basic setup involves forking a repository and configuring environment variables, so it is not a no-code tool. Writing content happens in Notion.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

NotionNext suits writers who already use Notion and developers who want a customizable Next.js site deployed to Vercel. If you want a no-code builder or plan to self-host on your own server, pick a different tool, since the documented path expects forking, environment variables and Node 22.

Install options & downloads