Notion Nextjs Blog

A starter blog template powered by Next.js, Notion and Tailwind CSS.

A Next.js, Notion and Tailwind CSS starter blog template

This is an open-source starter blog template that is statically generated with Next.js, content powered by Notion and styled with Tailwind CSS.

Still a work in progress.

Live example hosted on Vercel: https://blog.luciovilla.com

Clone this repo git clone https://github.com/luciovilla/notion-nextjs-blog.git
Install its dependencies npm install
Copy or rename the .env.example file to .env.local
Personalize the page meta data in Container.js

Page (type: title): this the blog post's headline and meta title.
Slug (text): this is the blog post's URL slug.
Date (date): the display date and meta published_time property.
Description (text): this is the preview text on the homepage and the meta description property.
Published (checkbox): this checks if a blog post should be displayed when deployed.
Cover Image (files & media): optional - adds a cover image for a post on the frontpage and becomes the featured image on social (og:image, twitter card image).

View this sample template table in Notion.

Create a Notion Integration.
Copy and paste the Integration Token in the .env.local file: NOTION_TOKEN=____
On the Notion page, click the "Share" button in the top right and share the database with the Notion Integration you just created
In a browser, go to the Notion page and grab the Database ID from the URL. Its the part of the URL after your workspace name and the slash and before the question mark. The ID is 32 characters long, containing numbers and letters.
Paste your Database ID in the .env.local file: NOTION_DATABASE_ID=___

In Notion click new on the table to add a new row
Fill in the Page title, Slug, Date and Description
Keep the Description text short, as it will be the text that shows up on the homepage as the post's preview text.

Run npm run dev

Deploy your own Notion blog with Vercel.

Thankful for the following people as I was inspired by their code: