Next + Notion Starter Kit

A minimalist starter kit for building content-driven websites using Notion as a headless CMS. This project is built on Next.js 16, React 19, and Tailwind CSS v4.

Notion Setup Guide

To use Notion as a CMS, you need to create an integration and share your database with it.

1. Create an Integration

1. Go to the Notion Developers portal.
2. Click + New integration.
3. Select the Workspace where your database is located.
4. Give your integration a name and click Submit.
5. Under Secrets, click Show and copy your Internal Integration Token. This will be your NOTION_API_KEY.

2. Prepare your Database

1. Open your database in Notion as a full page.
2. Click the ... (three dots) in the top-right corner.
3. Scroll to Connect to and search for the name of the integration you just created.
4. Click Confirm to give the integration access.

3. Get your Database ID

1. With the database open in your browser, look at the URL.
2. The ID is the string of characters after your workspace name and the slash, but before the question mark.
3. Format: notion.so/username/DATABASE_ID?v=...
4. Copy this string. This will be your NOTION_DATABASE_ID.

Installation

1. Clone and Install

git clone <your-repo-url>
cd next-with-notion
pnpm install

2. Configure Environment Variables

Create a .env.local file in the root directory:

NOTION_API_KEY=your_internal_integration_token
NOTION_DATABASE_ID=your_database_id

3. Development

Start the local server:

pnpm dev

Available Scripts

• pnpm dev: Starts the development server.
• pnpm build: Creates an optimized production build.
• pnpm fix: Executes both linting and formatting fixes.

Deployment

This starter kit is optimized for deployment on Vercel. Ensure you add your NOTION_API_KEY and NOTION_DATABASE_ID to the Environment Variables section in your project settings.