dinhanhthi / notion-nextjs-lib

🍒 A collection of basic blocks/renderer/components for building nextjs site based on notion and tailwind.

🍒 notion-nextjs-lib

A collection of basic blocks/renderer/components for building nextjs site based on Notion and Tailwind CSS.

👉 An example of using this library: dinhanhthi-com-v6.vercel.app. You can fork this repo to make the same site.

🚨 I created this library for building my 2 websites - math2it.com (a Vietnamese website for math and IT) and dinhanhthi.com (my personal website for taking notes). This library isn't for public use...yet! I don't have enough time to help you use this library. Please forgive me if I don't answer your questions.

Tech specs

• Official Notion API.
• Tailwind CSS.
• NextJS.
• Dev: tsub, prettier, eslint, yarn, VSCode settings.

Dev

🚨 You have to use Node >= 18!

# first install
yarn install

# build lib to ./dist
yarn build

# prettier
yarn prettier

# lint
yarn lint

Link to a project locally,

# using yarn v1
cd notion-nextjs-lib
yarn link

# back to the project
cd your-project # for example
yarn link notion-nextjs-lib

# DON'T FORGET to restart vscode!

To unlink,

cd notion-nextjs-lib
yarn unlink

cd your-project
yarn unlink notion-nextjs-lib

rm yarn.lock
yarn install --check-files

In case Notion unofficial APIs change for searchNotion()

Method searchNotion() uses the api of Notion on the notion page/app, this is not the official notion api. In case there are changes from their side, we can adapt the changes by checking:

1. Open the notion page and open developer mode, go to the Network tab and type "seach" in the filter.
2. On the Notion page, in the root database, press Search (or cmd + K), type something.
3. On the Network panel, there will be a new "search" item which appears. All the neccessary information are there!

How to use?

yarn add https://github.com/dinhanhthi/notion-nextjs-lib.git

You have to install Tailwind CSS to your project.

Add the following style to your main project,

import 'notion-nextjs-lib/dist/styles.css'

Put the following to tailwind.config.ts,

export default {
  content: ['./node_modules/notion-nextjs-lib/dist/**/*.{js,ts,jsx,tsx,mdx}']
}

How to import a component?

import BlockRender from 'notion-nextjs-lib/dist/components/BlockRender'

How to import a helper/lib?

import { getJoinedRichText } from 'notion-nextjs-lib/dist/helpers/block-helpers'
import { makeSlugText } from 'notion-nextjs-lib/dist/helpers/helpers'
// or a lib
import { getNotionDatabaseWithoutCache } from 'notion-nextjs-lib/dist/lib/db'