Notion as Blog, Portfolio and much more ...

AuthorMinja | Nov 01, 2021

Set up your own Blog using Notion api with the Next.js integration


Notion

When I started learning how to code ( spoiler: still learning ) organisation was a big issue, every day new information, exploring new resources trying different tools and so on... Suddenly you found yourself in a situation like: 'I know that I write somewhere, but where ???'

Trying Notion for the first time, I was amazed not with the functionality( which was confusing ) but with the clean minimalistic design and super user-friendly approach.

Basically Notion is a big LEGO software, with a bucket of blocks who combine text, databases, lists, images, videos, and embeds and more...

Releasing the API which is still in beta we are able to integrate "Lego kit" into other apps, websites etc.


Next.js

SSR, SSG, ISR, SEO friendly and as they announced at Next.js Conf Rust Compiler, Middleware, URL imports etc. changing the name to Now.js would be much more appropriate. There is no doubt, that Next.js is the new React(since React becomes new Linux).

Since my coding journey didn't start that long ago, Next.js is somehow still a new thing for me. Deciding to stick with Next for this project is somehow obvious if you want to learn more, beside that they have that cool flag —example with-tailwindcss .


Blog

One reason why blogging is so popular is that it is surprisingly easy. By starting your own blog, you are giving yourself your own medium for promoting yourself, using to show the world how skilled you are and it can work as a living-growing resume.

NOW the best part, transforming Notion into the Blog. Trying to implement a Low-code approach, abstracting and automating almost every step of the application lifecycle, there is a couple things to do before "express yourself" :

  • GitHub account - https://github.com/
  • Notion account - https://www.notion.so/
  • Create Integration Token - https://www.notion.so/my-integrations
  • Duplicate the Page - blogPost.database.Template
  • Go to Share button and Invite previously created Integration
  • Follow the steps and fill the Environment Variable Keys on Vercel.com
  • ... and that's pretty much everything .


    Conclusion

    The Blog has 100/100/100/100 score according to Google Lighthouse, so don't need to worry about how fast is it, optimized and accessible. There are a some tips from masterclass how to write your personal blog. Also a quick explanation guide about the properties inside the Notion and how they are represented in Next.js.

    In case you want your own domain here is Vercel documentation how to set up one.

    Here is the template in action https://notionblogs.vercel.app/ as well GitHub repo https://github.com/minime89-maker/next.js-notion-blog

    Copyright © 2022. Minja.