English | 简体中文
📚 A static knowledge navigation website built with Notion and Next.js, focusing on organizing and discovering quality reading resources. Achieve zero-cost maintenance of the knowledge base system through automated synchronization of Notion database content.
With the explosive growth of information, efficiently organizing and managing knowledge resources has become a pain point. Readzn combines Notion's flexible content management with Next.js's high-performance rendering to create an out-of-the-box knowledge navigation solution.
- Frontend Framework: Next.js 12 (SSG Static Generation)
- State Management: React Context + useReducer
- Styling Solution: Tailwind CSS + PostCSS
- Content Management: Notion Official API + react-notion-x
- Deployment Platform: Vercel Edge Network
🚀 Fast and Responsive
- Fast page rendering and responsive design
- Efficient static generation compiler
🤖 Instant Deployment
- Deploy on Vercel in minutes
- Incremental regeneration with no need to redeploy after updating Notion content
🚙 Feature Complete
- Comments system, full-width pages, quick search, and tag filtering
- RSS feed, analytics, Web Vitals, and more features
🎨 Easy Customization
- Rich configuration options, supporting both English & Chinese interfaces
- Built with Tailwind CSS for easy style customization
🕸 SEO Friendly
- Optimized URL structure
- Complete SEO configuration
node >=16.13.0
pnpm >=7.0.0- Copy the Notion template: Readzn Tempate
- Configure environment variables when deploying on Vercel:
# Required
NOTION_PAGE_ID="your_32char_page_id" # Get from Notion page URL
# Optional
NOTION_ACCESS_TOKEN="secret_xxx" # For private database access
GA_MEASUREMENT_ID="G-XXXXXXXXXX" # Google Analytics ID# Install dependencies
pnpm install
# Start development server
pnpm dev# Set environment variables
export NOTION_PAGE_ID=xxx
export IMAGE=readzn:latest
# Build Docker image
docker build -t ${IMAGE} --build-arg NOTION_PAGE_ID .
# Run container
docker run -d --name readzn -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} ${IMAGE}Contributions are welcome in the following ways:
- Submit issues at Issues
- Follow Git Flow branching model
- Before submitting a Pull Request, please run:
pnpm lint # ESLint check
pnpm format # Prettier formattingMIT License © 2025 [Readzn]
📧 Feedback Email: hyperfunc@protonmail.com 🐞 Bug Report: https://github.com/ChrisHyperFunc/readzn/issues
This project is built based on nobelium, special thanks to the original author for their outstanding work.