Preface
NotionNext is an open‑source blogging system built by Tangly1024 and contributors based on Next.js and the Notion API. Vercel is a serverless hosting platform developed by the official Next.js team — the two are a perfect match. Deploying NotionNext via Vercel requires no purchased server, no environment configuration, and no command‑line input. You can finish everything simply by clicking through menus.
This guide walks you through the complete end‑to‑end Vercel deployment workflow for NotionNext: duplicating the Notion template, forking the source code, configuring environment variables, binding a custom domain name, and ongoing site maintenance. Whether you are a complete technical beginner or a creator wanting to spin up a blog quickly, you can follow this tutorial to get your website online successfully.
Video Reference
1. Prerequisites
Before you begin, make sure you have the following three accounts ready:
Item | Description | Free of Charge |
Notion Account | Stores blog content; free for personal use | ✅ Yes |
GitHub Account | Hosts source code and triggers automatic deployments | ✅ Yes |
Vercel Account | Hosts your website; log in directly with GitHub | ✅ Yes |
All three platforms are entirely free for individual users, meaning you can run your own blog website at zero cost.
2. Prepare Your Notion Page
All content rendered by NotionNext comes from a single Notion page. First, duplicate the official template into your own Notion workspace.
2.1 Duplicate the Official Template
Open your browser and visit the official template page:
https://app.notion.com/p/02ab3b8678004aa69e9e415905ef32a5?pvs=21https://app.notion.com/p/02ab3b8678004aa69e9e415905ef32a5?source=copy_link
Click the Duplicate button in the top‑right corner of the page.
In the pop‑up window, select your target workspace and confirm by clicking Duplicate.
Wait a few seconds; the template will appear inside your Notion workspace.
💡 Tip: If you cannot see the Duplicate button, you are not logged into Notion. Please log in first and retry.
2.2 Enable Web Sharing
NotionNext reads page content via a public share link, so web sharing permissions must be enabled:
- Open the Notion page you just duplicated
- Click the Share button in the upper‑right corner
- Toggle on Share to web inside the pop‑up panel
The toggle turning blue indicates web sharing is active.
2.3 Retrieve Your Page ID
The Page ID acts as the bridge connecting NotionNext to your Notion page. It is a 32‑character alphanumeric string. Retrieve it as follows:
- Inside the Share panel, click Copy link to copy the share URL
- Paste the link into a notepad or any text editor
- Extract the 32‑character segment located before
?v=— this is your Page ID.
Example share link:
https://www.notion.so/yourname/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
Corresponding Page ID:
02ab3b8678004aa69e9e415905ef32a5💡 Common Mistake: Many users copy the content after?v=by mistake, resulting in an invalid Page ID. Remember to take only the 32‑character string before?v=.
3. Fork the NotionNext Source Code
Vercel pulls source code from your GitHub repository for deployment. You need to copy the NotionNext source code into your own GitHub account; this operation is called forking.
3.1 What is a Fork
Forking creates a personal copy of another user’s GitHub repository under your account. You gain full control over this copy and may modify it freely without affecting the original upstream project.
3.2 Operation Steps
- Visit the NotionNext GitHub repository: https://github.com/tangly1024/NotionNext
- Click the Fork button at the top‑right corner
- On the new page, keep the repository name as
NotionNext(default). You may check Copy the main branch only.
- Click Create fork
- After several seconds, you will be redirected to the forked repository under your GitHub account.
When you see
YourUserName / NotionNext at the page top with the note forked from tangly1024/NotionNext, your fork is successful.4. Deploy within Vercel
Your source code now resides on GitHub. Next, use Vercel to turn it into a publicly accessible website.
4.1 Log into Vercel
- Navigate to https://vercel.com/
- Click Sign Up or Log In in the upper‑right corner
- Select Continue with GitHub to authenticate using your GitHub account
- Complete authorization following the on‑screen prompts
4.2 Import the Project
After logging in, click Add New... → Project to open the new‑project page.
Under Import Git Repository, locate the NotionNext repository you just forked.
If it does not appear in the list, click Adjust GitHub App Permissions to grant Vercel repository access.
Once found, click Import on the right‑hand side.
4.3 Configure Environment Variables (Critical Step)
On the configuration screen, do not click Deploy immediately. Configure environment variables so NotionNext knows where to fetch your Notion content.
Scroll down to the Environment Variables section:
- In the Name field, enter
NOTION_PAGE_ID
- In the Value field, paste the 32‑character Page ID you obtained earlier
- Click Add to register the variable
❗ Important: The environment‑variable nameNOTION_PAGE_IDis fixed and case‑sensitive. A typo will prevent Notion data from loading and produce a blank website.
4.4 Start Deployment
Once your environment variable is added, click the Deploy button at the bottom of the page.
Vercel automatically performs these steps:
- Pull your source code from GitHub
- Install project dependencies (
npm install)
- Build the Next.js project (
npm run build)
- Deploy assets onto Vercel’s CDN network
The whole process takes roughly 1‑2 minutes; you may watch live build logs on‑screen.
4.5 Deployment Complete
When you see the celebration page showing Congratulations!, deployment has succeeded.
Click Go to Dashboard to enter your project console, then click the Visit button in the top‑right corner to browse your live website.
🎉 Congratulations! You now own your personal NotionNext blog. Your default access URL follows the formatnotionnext‑xxx.vercel.app.
4.6 Customize Your Site
You now have an independent blog. All site attributes — title, description, avatar, menu bar and more — can be fully customized to your preference.
💡 Tip NotionNext fetches Notion note content in real time. Due to caching and network latency, refresh the page up to twice to see synchronized updates.
💡 Troubleshooting If your site never synchronizes note data, re‑verify prior steps or restart the workflow:
- Confirm your
NOTION_PAGE_IDformat and that web sharing is enabled inside Notion.
- Verify
NOTION_PAGE_IDis correctly defined in Vercel environment variables, then trigger a Redeploy after correction. (Refer to documentation: how to inspect Vercel environment variables; how to redeploy)
5. Bind a Custom Domain
- Accelerate with Cloudflare CDN (free, simple configuration): Host your domain’s DNS on Cloudflare and enable proxy mode.
- For high‑traffic scenarios: Consider migrating to a server for Docker‑based deployment.
Vercel Free‑Tier Limitations
Major constraints for Vercel Hobby (free plan):
- 100 GB monthly bandwidth
- 6 000 build minutes per month
- Maximum 10‑second execution time per Serverless function
- Maximum 100 preview deployments per project
These quotas are more than sufficient for personal blogs and will rarely be exhausted under normal usage.
6. Advanced Tips
6.1 Automatic Deployment
Automatic deployment is enabled by default on Vercel. Every time you push code to GitHub, Vercel automatically builds and deploys to production. Even editing and saving files directly within the GitHub web interface triggers automatic deployment.
6.2 Preview Environments
When you submit a Pull Request on GitHub, Vercel generates a Preview Deployment with a dedicated preview URL. This lets you inspect changes before merging code, which is very helpful for team collaboration or testing new features.
6.3 Environment‑Specific Variables
Vercel supports distinct environment variables for Production / Preview / Development environments. For example, you may use a test Notion page for Preview and your official page for Production without mutual interference.
6.4 Custom Build Commands
If you require special build behavior, you can customize build commands and output directories inside Vercel Project Settings → General → Build & Development Settings. Default settings work for most scenarios.
7. Summary
Deploying NotionNext on Vercel represents one of today’s simplest, lowest‑cost blog‑building solutions: zero server fees, zero operation‑and‑maintenance overhead, and fully visual workflows. The core workflow consists of three steps: duplicate the Notion template → fork the repository → import and deploy via Vercel. You can finish everything in as little as ten minutes.
After deployment, adjust site settings, switch themes, and activate plugins conveniently through Notion Config — all operations happen inside Notion with no code edits required. Upgrading to new official releases is as easy as clicking Sync fork.
If you are unsure which blogging tool to adopt, try the NotionNext + Vercel stack. It arguably delivers the best balance of writing experience and deployment cost available today.
Happy site‑building! 🚀
8. More Resources
For further information, please visit:
- Author:Happinessrailway Offfice
- URL:https://blog.happinessrailway.com/en/article/vercel-deploy-notion-next
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts
My Dog
【BVE5】Update for work “Jibei Railway”,250405
Counterfeiting DeepSeek is rampant! All netizens should be vigilant!
Deepseek, a full blood version of Zhejiang University, is available online for free and shared by 829 colleges and universities across the country
DeepSeek Series Models have been Launched on China's Supercomputing Internet
Is OpenAI plagiarizing DeepSeek finished? When the American player interacted with it, it started to think in Chinese!
