What is Notion API?

Notion API is an API that allows developers to interact programmatically with Notion databases, pages, and blocks. With this API, developers can build custom integrations, automate workflows, and create applications that leverage Notion's powerful database and page building capabilities.

Essentially, I have eliminated the need to have a separate database and a content management system for my blog, which is really great if you think about how easy it is to use Notion and how tricky it can be learn and manage other CMS tools.

So here’s what I did…

I planned to build out a static site for my portfolio where I would end up wiring in my blogs as well with NEXT.JS. NextJS has been my go to React framework from the past several months, and it was a no brainer, since this was a portfolio and a blog site.

I could rely on my comfortability with the React framework and the React eco system and let NextJS handle all the nitty gritty stuff required to build out a static site.

I did consider Gatsby for a while, but NextJS was still the better choice.

I also used tailwindcss but we’ll talk more about that maybe some other time. Or in another blog perhaps 😉

Setting up my Notion Account

There were several options on how I could setup and organise my notion instance. But I had to choose one which would best fit my use case.

I stumbled upon Brad Traversy’s notion api crash course and he had chosen to show the calendar database to inform his subscribers about upcoming videos. I thought, well, this might work for me as well.

I needed to have a workflow that would allow me to maintain different topics I wanted to talk about, but seeing it laid out on a calendar made the best sense to me.

Once I created this, I then needed 2 things. The database Id of this Calendar and the secret key to access notion’s api (kind of like an api key - actually exactly like an api key)

The Notion secret

To setup the secret, I headed on over to https://developers.notion.com and created a new integration. I was then able to access this from the ‘View my integrations’ link right on the nav bar.

The Database Id

You can get this id from the copy link menu item. This copies on to your clipboard which you can view and extract out the Id.

The db Id format is XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX . So you may have to add the ‘-’ character where ever necessary

I set these up as environment variables in my NextJS project.

NOTION_SECRET_KEY=<Your notion secret key>
NOTION_DB_ID=<Your calendar DB Id>

The NotionAPI client for NodeJS

The last thing I needed before beginning the UI build for my blogs was the official notion client for NodeJS.

https://www.npmjs.com/package/@notionhq/client

yarn add @notionhq/client

# or

npm install @notionhq/client

That’s it, I was now able to gain access to my notion database directly in my ‘getStaticProps’ and ‘getStaticPaths’ functions and build out the UI to my liking.

const notion = new Client({
	auth: serverEnv.NOTION_SECRET_KEY,
});