DEV Community

Use Notion as a database for your Next.JS Blog

Martin PAUCOT on May 13, 2023

Notion is an extremely powerful tool to manage your content by creating a database you can even add properties to pages: publication date, tags, et...

Read full post

Huy Tran • Jun 11 '23

@notion-render/hljs-plugin A plugin to fetch website metadata to render bookmarks
need to be modified to:
@notion-render/bookmark-plugin

Hasanul Haque Banna • Mar 15

The question how can I decode from html/render? Because for doing SEO it is mandatory to implement where to put necessary content so how can I get according to SEO needs?

Martin PAUCOT • Mar 15

Hey! I do not entirely understand your needs. But when fetching the page fetchPageBySlug(params.slug) it returns the page properties aswell.

You can use it inside generateMetadata to use the page here is how I do it on my blog (with dev.to articles).

You can aswell use generateStaticParams to statically generate all your blog pages at build time.

The result: martin-paucot.fr

Hasanul Haque Banna • Mar 25

for metadata instances there has, image property as well how can I get that using notion?

Martin PAUCOT • Mar 26

When fetching a page, you would have the properties as well.
developers.notion.com/reference/re...

Hasanul Haque Banna • Mar 25 • Edited

I am getting this error;

Martin PAUCOT • Mar 26

If I remember well the plugin expect a configuration, even empty. So hljsPlugin({})

Alvaro • May 18 '23

I have also used it as an MVP for an API, i would recommend to put things behind a lambda or service to have a contract layer and not be tide to the query or response model from Notion.

Martin PAUCOT • May 18 '23 • Edited

The model sent to the Notion API is really complex for no reason (in my opinion).

This is why I am working on NotionX! A library that makes working with Notion extremely easy.

Feel free to follow the project and my Twitter to know when it gets published!

David Yarzebinski • Jun 22 '23

Would love to help with this if there's a possibility of collaboration!

Javi Aguilar • Oct 18 '23

I looked at the code of NotionX and looks much cleaner than the official SDK. Do you have plans to release it on npm to start trying it? :)

Eber Alejo • Jun 21 '23

Looks so interesting, great job!

Ramo Mujagic • May 18 '23

Really nice idea.
Tnx for sharing.

MaxBrych • May 16 '23

cool stuff

Jeremy Smith • May 16 '23

Keen to try this tomorrow!!

Netsai • May 17 '23

This is really awesome!

Bora Karaca • May 17 '23

Interesting... Will try this out tomorrow or later

jonmccon • May 16 '23

This is really awesome! I've pulled content with the notion api but it's quite tedious. Does your work support metadata or database views? Great work, thank you!

Martin PAUCOT • May 16 '23

Hey! Thanks for the feedback! I am actually working on an improved fully typed Notion Client, currently it only supports fetching but in a near future the idea is to be able to use it like a library github.com/kerwanp/notionx.

If you talk about external website metadata like the Bookmark block, the Bookmark plugin will fetch them from the targeted website to render the block.

I never had to query database views before but it will be definitely implemented in the future library I'm working on.

Tilak Khatri • Dec 29 '23

I am using app route of nextjs13 approute , this below api call showing me cors error how to solve it.

And calling it here.

Hoping for solving idea :)

Hector Sosa • May 15 '23 • Edited

This is a pretty cool concept! I experimented with it in the past too! Framing some of these screenshots would've been chef's kiss! @martinp I've built a simple OSS tool for creating engaging screenshots with ease. Check it out and let me know what you think! Cheers!

github.com/ekqt/screenshot

Nguyễn Thế Sơn • May 27 '23 • Edited

Hi Martin,

I used it in my React application, although i have block, the htmlTemp is still an empty string ("")

Here is my code:

                const block = await getBlogBlock(id);
                const renderer = new NotionRenderer({
                    client: notion,
                });
                renderer.use(hljsPlugin());
                renderer.use(bookmarkPlugin());

                const htmlTemp = await renderer.render(block);
                setHtml(htmlTemp);

The block looks like this when i debug:

Could you please provide some guidance on how to fix this or point me in the right direction? Any help would be greatly appreciated.

Thank you in advance!

Martin PAUCOT • May 27 '23

Hi! The render functions uses rest parameters. Replacing renderer.render(block) by renderer.render(...block) should resolve your issue! (and you can plurialize block at the same occasion).

Basically, a page content contains a list of blocks (paragraphs, bookmarks, quotes, etc). This is why your getBlogBlock function returns an array

Alwaisy al-waisy • May 20 '23

what is their geneorus limiT. Airtable can also do the same.

Martin PAUCOT • May 24 '23

Airtable is cool but Notion is mostly use by marketing and sales team.
It makes way easier for anyone to write content.

And in my case, sometimes when I have an idea I simply open the Notion App and start writing content and set the status of my page to "Draft".

And when it is ready to be published, I just drag the page within my Kanban view to "Published" and tada it appears on the website!

Alwaisy al-waisy • May 24 '23

so simple. How about the limits. 1000 blcoks in free notion.

Martin PAUCOT • May 24 '23

I have no problems of paying the tools I use daily, but if in your case using Airtable makes more sense, go for it!

If you are intersted, I also wrote an article on how to directly fetch your DEV.to posts for your blog Build a Blog using Next.JS and DEV.to

Kb • Jan 2

Hello, i have a question about showing the notion pages as a webpage in your blogpost it mentions the path blog/[slug] so the url would be /blog/my-first-post...

i can get the page to show but not any of the content...