Notion powered Next.js application with Tailwind CSS, hosted on Vercel

I wanted a personal site that worked as a cv as well as a place where I could post whatever I felt like. Browsing through the web, I saw a lot of people write on md/mdx. But having to re-deploy every time I wrote something became a sticking point for me.

That’s why the idea of writing on Notion was the one that I went with. I experimented with few integrations on GitHub but felt they were either too big for my project or too confusing to understand what was going on. At last I decided to build it from the scratch, which meant at the very least I improved my typescript and Next.js.

This is my first ever post on the deployed site. Currently, I’ve only integrated absolutely necessary components but plan to add more as per need. This is very much a WIP and I will tweak it regularly. :)

Github: https://github.com/bimalpaudels/personal-site

Notion: https://bimals.notion.site

Demo From README.md

Introduction

This is the repository of my personal website built using Next.js and Notion SDK which is hosted on bimals.net.

The minimal design and having in-line navigations instead of a navbar is heavily inspired by Lee Robinson's personal site.

Features

Setup

Project Installation

After forking/cloning the repo:

npm install
npm run dev

Notion Integration

Notion Integration setup is required to consume Notion APIs.

Notion DB/Page Consumption

Environment variables (.env.local):

NOTION_KEY=secret_GLafldkjfdk4hkjaf922dflkfaasdNyq7axYz

NOTION_PAGE_ID=gggab7askjh8adfaa8asd01

In the root page.tsx:

import { fetchNotionPageContent } from "@/lib";
import NotionBlockChildrenRenderer from "@/app/renderer";

const pageId = process.env.NOTION_PAGE_ID;

export default async function Page() {
  if (!pageId) {
    throw new Error("NOTION_PAGE_ID is not defined in environment variables.");
  }
  const page = await fetchNotionPageContent(pageId);
  return (
    <>
      <NotionBlockChildrenRenderer blocks={page} />
    </>
  );
}

If everything is setup correctly, localhost:3000, should have the content from Notion Page.

Working demo

I have used this README.md in a Notion post as a working example/demo.

Notion Blocks

Following are the blocks from Notion that have components at the moment along with those that are WIP. I plan on continuously adding more as per need.

Working components

WIP Components

License

This project is licensed under the MIT License - see the LICENSE file for details.