Blogging with Notion & Next.js Completely for Free

Use Notion As a CMS and Complete Backend.

Comment

Create Your personal blog website with just few clicks, with Next.js and Notion as CMS & backend, and it completely free.


Tech Stack:

  • Next.js, Tailwind CSS, Typescript, Framer Motion, Cloudinary, Notion

Features

  • Setup only takes a few minutes. All you need to do is edit the .env file.
  • No database cost, no hosting of the database
  • Deploy the frontend on Vercel for free
  • Add Google Analytics by including only one edit in the .env file with the Google Analytics ID.
  • Very easy to add blogs through notion pages
  • Complete Notion Block Support. This project does not depend on any third-party Notion rendering dependency. I have created my own NotionRenderBlock.tsx function, so there's no need to worry about it becoming outdated or not being supported.
  • The website is completely Server-Side Rendered (SSR) and Statically Generated (SSG).
  • Super fast loading time
  • Dynamic Routing
  • Add blog thumbnails or images in blogs through Notion by directly adding source files or Cloudinary image URLs in Notion. It will optimize the image and cache it during build.
  • Automatic pretty URLs (blog slugs will be generated from the blog title) + with hash links so you can share a particular section of the blog.
  • Fully responsive design for all devices.
  • Beautiful UI and UX with animations (using Tailwind CSS and Framer Motion).
  • Dark and light mode (on the first visit, it will automatically switch to your device's theme, and if you change it, it will remember your preference)
  • Search bar for finding blogs
  • Quick search via '/' (slash) key. Use Esc to close the search bar and TAB to switch between quick links.
  • Automatically generate a table of contents aside-bar with hash links on blog pages so you can directly go to that blog section by clicking the link.
  • Complete SEO optimization includes Open Graph integration, sitemap generation, and favicon implementation. You don’t need to do anything; it will be done automatically.

How It Works

We add the Database ID & Notion Integration key in the env file → Then, we deploy the frontend on Vercel → During the build, it will fetch all the Database Properties & Notion pages IDs → With this data, we Populate Blog Cards → Using the Notion Page ID, we create Blog Pages Dynamically → That page content will render in Proper HTML tags with my NotionRenderBlock.tsx function → All the thumbnails and images are Optimized and Cached → For each Blog, we Dynamically generate Metadata OpenGraph images so you don't need to worry about SEO

The Whole Website will Server-Side Rendered (SSR) and Statically Generated (SSG)

Note: The data fetching only happens during the build process, and it occurs only once.

What Inspired Me

Creating a Blog Website or Any Website can be a complex process, involving managing databases and hosting, which often requires additional knowledge. Moreover, databases are not free. With this project, anyone can easily create a blog website and manage content without hassle through Notion Pages. Adding data is straightforward, just like on this blog website.

What's Next for Blogging with Notion & Next.js

  • My goal is to create more templates like this for business websites, business blogs, personal websites, and personal portfolios with beautiful UI & UX.
  • These additions will offer users a wider array of options to create diverse types of websites effortlessly.
  • Additionally, I aim to establish a platform where users can easily purchase these templates to suit their specific needs.

Built With

Share this project:

Updates

Submission history