Build an independent website from Notion.
Keep writing in Notion, and publish your content as a blog, portfolio, knowledge base, directory, or product website.
Live Preview · Get Started · Themes · Showcase · Docs · Discussions
中文 | English
NotionNext is an open-source website system built with Next.js + Notion API. You keep managing posts, categories, tags, menus, and pages in Notion. NotionNext turns that content into an independent website that can be visited, searched, customized, and operated over the long term.
It is useful for creators, indie hackers, designers, photographers, course authors, open-source maintainers, and small teams that want a fast website for content, docs, portfolios, or product pages.
| Goal | Recommended Entry | Best For |
|---|---|---|
| Personal blog | Get started | Writers, developers, students |
| Portfolio or personal brand | Choose a theme by use case | Designers, photographers, freelancers |
| Product website or SaaS landing page | Starter / Landing / Proxio | Indie products, startups, small teams |
| Knowledge base or docs site | GitBook / Claude | Open-source projects, course authors, teams |
| Directory or resource hub | Nav theme | Curators and community operators |
- Keep using Notion: posts, categories, tags, covers, menus, and pages stay in Notion.
- Short path to launch: duplicate the Notion template, fork the repository, connect Vercel, and deploy.
- Many built-in themes: 26 themes for blogs, docs, portfolios, product sites, galleries, and directories.
- Built for long-term operation: custom domains, SEO, Sitemap, RSS, comments, analytics, search, ads, and email subscription.
- Open-source and controllable: source code, configuration, and themes live in your own repository.
- Clear data path: Notion stores the content, the website handles publishing, and future migration remains possible.
- Open the theme preview site and choose the site style you want.
- Duplicate the official NotionNext Notion template.
- Fork this repository to your GitHub account.
- Deploy with Vercel.
- Set
NOTION_PAGE_IDand other required environment variables. - After launch, configure your theme, domain, comments, analytics, and search as needed.
New users should start with the Get Started guide.
- Live theme switcher: preview.tangly1024.com
- Built-in themes: Themes catalog
- Theme docs in this repository: docs/user-guide/themes/
| Use Case | Start With |
|---|---|
| Personal blog | simple, hexo, nobelium, typography |
| Docs / knowledge base | gitbook, claude, thoughtlite |
| Portfolio / personal brand | opc, proxio, starter, landing |
| Product website | starter, landing, commerce |
| Photo / visual content | photo, plog, magzine |
| Directory | nav |
Use Node 22 and Yarn 1. Node 20 cannot install the current dependency set because @ai-sdk/google requires Node >=22.
nvm use || nvm install
npm i -g yarn
yarn
yarn devCommon commands:
| Command | Purpose |
|---|---|
yarn dev |
Start local development |
yarn build |
Build for production |
yarn export |
Static export |
yarn docs:site:dev |
Preview the docs site locally |
yarn docs:site:build |
Build the docs site |
| Content | Link |
|---|---|
| Docs site | notionnext.tangly1024.com |
| New user guide | Get started |
| Use-case templates | Choose by goal |
| Configuration index | Features and configuration |
| Theme docs | 26 built-in themes |
| Showcase | User websites: submit your site after launch |
| Docs source | docs/ |
The canonical repository is maintained by notionnext-org. Contributions to code, docs, themes, issues, reviews, and discussions are welcome.
| Content | Link |
|---|---|
| Community guide | community-participate.md |
| Vision and roadmap | VISION_ROADMAP.md |
| Contributing | CONTRIBUTING.md |
| Governance | GOVERNANCE.md |
| Maintainers | MAINTAINERS.md |
| Code of Conduct | CODE_OF_CONDUCT.md |
| Discussions | GitHub Discussions |
If you cloned from the old repository before the transfer, update your remote:
git remote set-url origin https://github.com/notionnext-org/NotionNext.git
git remote -v- Framework: Next.js
- Styles: Tailwind CSS
- Rendering: react-notion-x
- Comments: Twikoo, Giscus, Gitalk, Cusdis, Utterances
- Deployment: Vercel
Special thanks to Craig Hart for initiating the Nobelium project.
 Craig Hart |
Thanks to everyone who contributes code, themes, docs, issues, reviews, and release maintenance.
This project is free and open source. Use it for personal learning and lawful website publishing. Do not use it to publish illegal content or conduct unlawful activities.
The MIT License.