Welcome

If you've been using Notion to draft and organize your content, you're in for a treat – you can now seamlessly transform your Notion workspace into a visually appealing blog using Next.js and Tailwind CSS.

I recently discovered the power of leveraging Notion as the backend and Next.js as the frontend for publishing blogs. The combination provides a visually stunning front end, coupled with the convenience of managing content in Notion for your community – and the best part? It comes at no cost!

Check out the blog I created using this setup: Analytics Roundtable Blog

Notion setup

1. Notion Template

Start by duplicating my Notion template here. After duplication, set up an API key to allow Next.js to retrieve data from Notion. Share and publish your site for a seamless integration.

2. Notion API

Create your Notion API by going to My Integrations and selecting '+ New Integration'. Copy the secret key generated and save it for later use. In your Notion blog template, add this integration as a connection in the settings.

When you create your integration, you will then be able to copy your secret key. Save this for later.

In your notion blog template, click the ‘…’ settings button, and in connections, add this integration as a connection;

Nextjs Setup

3. Clone and Configure

Fork the Next.js Notion Starter Blog and update the .env.local to .env with the Notion database ID, Notion API key, optional Slack webhook for notifications, and the About page ID.

NOTION_DATABASE_ID: taken from the url, after notion.site/

NOTION_API_KEY: covered in the previous step SLACK_WEBHOOK: Optional step, I like to get notification when people visit my site ABOUT_PAGE: ID can be found in the URL, when you click on the about page

4. Get Coding

Clone the codebase, pull the repository, and run the following commands in your command line:

bashCopy code
npm install && npm run dev

If everything is set up correctly, you should now witness the magic of your fully functional and aesthetically pleasing blog! 🎉

Feel free to explore and customise your blog based on your preferences, and enjoy the simplicity of managing your content through Notion while delivering a top-notch user experience on the frontend. Happy blogging!