Next.jsReactBlogStarter

notion-nextjs-blog — Next.js Blog Template

By luciovilla

A blog starter template built with Next.js static generation, using a Notion database as the content source and Tailwind CSS for styling. It is MIT licensed, and the author notes it is still under development.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

Next.js statically generated pages, with content sourced from a Notion database

Styling and layout using Tailwind CSS

Posts controlled through Notion table fields: title, Slug, date, description, publish toggle, and cover image

Provides .env.example, integrated via two environment variables: NOTION_TOKEN and NOTION_DATABASE_ID

Repository includes a one-click Vercel deployment entry

MIT licensed, permitting use, modification, commercial use, and distribution

Template Details

This is an open-source blog starter template. Pages are statically generated by Next.js, post content comes from a Notion database, and styling uses Tailwind CSS. The repository author explicitly notes in the README that it is "still under development," making it suitable as a starting point for building a personal blog rather than a finished site.

Content management: Create a new page in Notion and add a table. The table needs columns including Page (title), Slug (text), Date (date), Description (text), Published (checkbox), and optionally Cover Image (files & media). Whether a post is displayed is controlled by the Published checkbox. Description is used both as the homepage preview text and the page meta description. Cover Image serves as the homepage cover and social sharing image.

Integration: You need to create a Notion Integration to obtain a Token, share the target database with that Integration, and extract the 32-character Database ID from the Notion page URL. Write both into .env.local as NOTION_TOKEN and NOTION_DATABASE_ID. Run locally with npm run dev. The repository also provides a one-click Vercel deployment entry.

Known limitations: The author does not claim production readiness. The free scope refers only to the MIT-licensed code itself; external dependencies such as Notion services, domains, and hosting may incur separate charges. Third-party assets in the demo, such as images, fonts, and icons, need separate license verification.

Next.jsBlogStarter

Is it right for your project?

Use Cases

Personal sites that use Notion as the writing backend and want posts automatically synced to a static blog
Developers who want to start building a blog from an existing Next.js + Tailwind CSS structure
Scenarios that need to map titles, dates, and descriptions from a Notion table to homepage lists and post page metadata
Projects deployed via Vercel that want to manage Notion credentials with environment variables

Suitable For

Developers familiar with Next.js and npm workflows who can configure environment variables themselves
Users who accept the author's "still under development" status and are willing to adjust the code themselves
Personal blog authors who use Notion as their sole content editing entry point

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
After cloning the repository, run npm install and copy or rename .env.example to .env.local
2
Create a Notion Integration to obtain a Token, and share the target database with that Integration
3
Extract the 32-character Database ID from the Notion page URL and write it into .env.local along with the Token
4
The Notion table needs Page, Slug, Date, Description, and Published columns; Cover Image is optional
5
Run locally with npm run dev; page meta information must be modified manually in Container.js

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

The code of this version may be used, modified, used commercially, and distributed free of charge.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Using this template requires registering and creating a Notion Integration, depends on Notion as an external service, and you bear its availability and possible fee changes.
You must apply for a Notion Integration Token and configure environment variables yourself; otherwise content cannot be fetched.
You must provide a Notion database ID and share it with the Integration; the content source is tied to the Notion platform.
The official deployment path relies on Vercel hosting; its free quota and billing policies are determined by a third party and may incur charges.
The author explicitly notes the project is still under development and does not claim production readiness; evaluate stability yourself before use.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Create a [Notion Integration](https://www.notion.so/my-integrations).
Original README

Copy and paste the Integration Token in the `.env.local` file: `NOTION_TOKEN=____`
Original README

Paste your Database ID in the `.env.local` file: `NOTION_DATABASE_ID=___`
Original README

Deploy your own Notion blog with Vercel.
Original README

*Still a work in progress.*
Original README

https://github.com/luciovilla/notion-nextjs-blog/blob/main/LICENSE https://github.com/luciovilla/notion-nextjs-blog/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 77 / 100
Technologies: Next.js · React
Website type: Blog · Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2023-04-18
Screenshot last checked: 2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 14880e7646256a82b490c94b876bb46874f776860304b09e5ef1b9e0d74f54eb

2026-10-02T20:43:56.844Z

Source file / repository

# 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](https://blog.luciovilla.com)

## Getting Started

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

## Creating Your Notion Pages Table

1. Create a blank page in Notion
2. Create a table on that page.
3. Add the following columns to the table:
- `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](https://vast-rifle-eed.notion.site/8dde3326f8cb4cc68b47a96bea86e9be).

## Getting Database ID and Notion Token

- Create a [Notion Integration](https://www.notion.so/my-integrations).
- 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=___`

## Creating Blog Posts

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

## Running Locally

Run `npm run dev`

## Deploy your own

Deploy your own Notion blog with Vercel.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fluciovilla%2Fnotion-nextjs-blog&env=NOTION_TOKEN,NOTION_DATABASE_ID&envDescription=Notion%20Integration%20token%20and%20Database%20ID%20required.&envLink=https%3A%2F%2Fblog.luciovilla.com%2Fnotion-blog-setup-instructions&project-name=notion-blog)

## Credits
Thankful for the following people as I was inspired by their code:
- [samuelkraft](https://github.com/samuelkraft/notion-blog-nextjs)
- [ijjk](https://github.com/ijjk/notion-blog)
- [leerob](https://github.com/leerob/leerob.io)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

Next.js SaaS Starter

The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.

Next.js · SaaS

Next.js Commerce

Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.

Next.js · E-commerce

Next-js-Boilerplate

A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.

Next.js · Starter

tailwind-nextjs-starter-blog

A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.

Next.js · Blog

next-forge

next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.

Next.js · Starter

SaaS-Boilerplate

SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.

Next.js · SaaS