How I built this blog using Notion + NextJS

It's time to reveal one of the things I'm most proud of, which is how I've built my personal web page and specifically my blog based on free Notion databases and a Next.js wrapper.

Here’s what I did:

1. Created a blog index (a database of posts)

   Here are the properties I added:

   • Name (Blog Title)

   • Tags (multi-select)

   • Author

   • Published Date

     

2. Connect the notion index by opening the index page selecting the hamburger menu → Connections

   

   Then select “Develop or manage integrations’

   

   Then select ‘Create a new integration’

   

   Name your integration and select the workspace association where your blog index is located. I keep mine in a private workspace so I can work on drafts until they are published.

3. Save the Internal Integration Secret

   

4. Have claude code build you a nextjs app blog that wraps around a Notion api call

5. Your app will have some environment variables for your local (test) environment and you will likely need to reproduce them in your production environment. For your local (development) blog, you’ll have a .env file created that manages your environment secrets. Here’s what you’ll need to save in this file:

   • NOTION_TOKEN (Integration Secret)
   • NOTION_DATABASE_ID (end of url slug)

   You can find your database ID by going back to your notion app, open your blog index, and select ‘Copy Link’ from the menu bar (or command-L). Then open the link in your browser. You will want to copy down the slug (aka jumbled letters and numbers after the domain name in the url. I.e., everything after ‘https://notion.so/. Don’t copy anything after a ‘?’ in the url - that character signifies the end of the database id.

   

   Your .env file should look something like this:

   NEXT_PUBLIC_SITE_URL = http://localhost:3000
   
   # Notion Integration
   # Get your Notion API token from: https://www.notion.so/my-integrations
   NOTION_TOKEN=your_notion_integration_token_here
   
   # Your Notion database ID (from your database URL)
   # From your URL: https://www.notion.so/database_id
   NOTION_DATABASE_ID=2826ede4d6f381bf83fde4b75e4c902f

   Note - this file SHOULD NOT be published to any git repo, public or private. Please ensure you have a .gitignore file in your blog repo that prevents this from happening.

6. Push the blog to your cloud of choice.

   This is a simple app, so the cost should be negligible unless you’re way more famous than me. I’m not, so I use vercel, which has a user-friendly front—end and unlimited projects for their free tier.

7. Copy your environment variables to the production environment

   Again, here’s are the two key values for your notion blog integration:

   • NOTION_DATABASE_ID (end of url slug)
   • NOTION_TOKEN (Integration Secret)

8. Deploy and enjoy your online blog, built on free-tier amazingness!