Nextjs Notion Blog Starter

• Default demo - Deployed from main branch
• Blog setup - I wrote an article on how to use this starter to start your blog

✨ Features

• ✅ Setup takes only a few minutes (single file config) 💪

• ✅ Newsletter subscription via Convertkit API

• ✅ Simple analytics with Umami

• ✅ Automatic OG social images with Tailwind template

• ✅ Automatic pretty URLs

• ✅ Excellent page speed

• ✅ Optimized for Next.js and Vercel

🛠 Build with

• Framework: Next.js, Typescript
• Styling: Tailwind CSS
• Content: Notion API
• Newsletter: Convertkit
• Deployment: Vercel

📕 Project Overview

• layouts/* - The different layouts used on each page.
• components/* - Components used throughout the site.
• components/blocks/* - Custom blocks made for Notion rendering.
• utils/* - Short for "utilities", a collection of helpful utilities or code for external services.
• pages/api/* - API routes powering /og-image dynamic OG image and /subscribe-convertkit newsletter subscription.
• pages/blog/* - Static pre-rendered blog pages that fetch information from the Notion API.
• pages/* - All other static pages.
• public/* - Static assets including images, fonts, and videos.
• styles/* - global styles and Tailwind.
• siteData.ts - a simple file containing global data about the site.

🏃‍♂️ Running Locally

git clone https://github.com/tuanphungcz/nextjs-notion-blog-starter
cd nextjs-notion-blog-starter
pnpm install
pnpm run dev

Create a .env file similar to .env.example and include the appropriate keys.

🚀 Deploy to vercel

NOTION_SECRET=
BLOG_DATABASE_ID=

# ConvertKit is optional
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami is optional
NEXT_PUBLIC_UMAMI_ID=
NEXT_PUBLIC_UMAMI_URL=

💁‍♀️ How to use

• Blog setup - I wrote an article on how to use this starter to start your blog

📝 Credit & inspiration

This blog starter was inspired by all of these awesome open-sources

• samuelkraft-next by @samuelkraft
• leerob.io by @leerob
• Next.js Notion Starter Kit by @transitive-bullshit
• braydoncoyer.dev by @braydoncoyer