This is a Next.js blog written in TypeScript that integrates with Notion's Public API to fetch and display content. Notion posts are cached so that they are updated when npm run cache-posts is run. The project is a fork and enhancement of the Notion Blog template tailored for performance, security, and ease of use.
Live Site: https://www.zamiang.com
- High performance due to SSR: Pages are rendered server-side and are very small all have a 100 score from Vercel's performance dashboard.
- Sitemap Generation: Automatically creates a sitemap for SEO optimization.
- RSS Feed: Provides an RSS feed for syndication and content aggregation.
- Content Security Policy (CSP): Enhances security by restricting sources of executable scripts, styles, and other resources.
- Code Quality Tools: Comes with a robust ESLint and Prettier configuration for consistent, clean code.
- Photo & Writing Pages: Separate sections for blog posts and photo galleries, both sourced from Notion.
- CDN-Backed Images: Uses Vercel's Image Optimization for fast, responsive image delivery.
- Frontend: Next.js (with App Router)
- Language: TypeScript
- API Integration: Notion API
- Image Optimization: Vercel Image Component
- Code Quality: ESLint, Prettier
- Deployment: Vercel
├── public/ # Static assets (images, favicons, etc.)
├── src/ # Source code
│ ├── app/ # Next.js App Router pages
│ ├── components/ # Reusable UI components
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions and API integrations
├── __tests__/ # Unit and integration tests
├── scripts/ # Build scripts (e.g., caching Notion data)
├── .eslintrc.json # ESLint configuration
├── .prettierrc # Prettier configuration
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── README.md # This file!
Follow the Notion API Getting Started Guide to obtain:
NOTION_TOKEN: Your Notion integration token.NOTION_POSTS_DATABASE_ID: The database ID for your blog posts.NOTION_PHOTOS_DATABASE_ID: The database ID for your photo gallery.
Save these in a .env.local file:
NOTION_TOKEN=your-notion-token
NOTION_POSTS_DATABASE_ID=your-posts-database-id
NOTION_PHOTOS_DATABASE_ID=your-photos-database-idnpm installnpm run devOpen http://localhost:3000 to view the blog.
npm run build
npm run previewThis project is optimized for deployment on Vercel:
- Push your code to a Git repository.
- Deploy using the Vercel CLI or Vercel Dashboard.
- Ensure environment variables are set in the Vercel dashboard under "Settings > Environment Variables".
The project includes unit and integration tests using Vitest. To run tests:
npm testTests are located in the __tests__ directory and cover core functionality like:
- Notion API data fetching
- Component rendering
- Image optimization
- Themes: Modify the
tailwind.config.tsandpostcss.config.mjsfiles to customize the design. - Notion Content: Update the Notion databases to reflect new posts or photos.
- SEO: Adjust the
next.config.tsfor custom sitemap or meta tags.
This project is licensed under the MIT License. See the LICENSE file for details.
Contributions are welcome! Please follow these guidelines:
- Fork the repository.
- Create a feature branch.
- Make changes and ensure tests pass.
- Submit a pull request.
For major changes, please open an issue first to discuss what you'd like to add.
- Implement a table of contents / maybe a UI revision to better handle posts in series
- Based on Notion Blog by thegesturs
- Inspired by Next.js Blog Examples