I develop the blog by Next.js, and I use Notion as editor of the blog, so I write about that.
I can write posts by the notion and select the date to publish. Website get these post information by using Notion API and the index page shows each post, and after clicking on the title, it opens a detailed page. In addition, since I write articles in both English and Japanese, I have added a hashtag function so that only English articles can be displayed.
This article was originally published on my blog. Head over there if you like this post and want to read others like it.
My blog structure is really simple. Next.js server calls notion API to get posts information from the notion table. The below image is my memo before coding.
This is the code of this blog.
This is my first time writing a tech post in English, so if you have any pointers, whether about programming or English, please send a comment on the notion page below.
Contents
- Why Next.js
- Why Notion
- React Notion X
- Code
- Reflections
1. Why Next.js
Next.js is React framework that can be used for developing web applications functionalities such as server-side rendering(SSR) and Static-Site Generating(SSG).
The reason why I used it in this blog system is that it’s really easy to develop web applications including using Vercel. Also, SSG is a good structure to make a light and fast website.
We have the option of using SSR, SSG and using both of them by Next.js. SSR renders pages by each request. In contrast, SSG generates pages when updated.
SSR is Subway; you start cooking after ordering, so it is easy to handle even if each person’s order is different. It means it’s a better method for sites like Twitter, where everyone posts a lot.
SSG is KFC; you can put the fried chicken up beforehand and serve it when ordered because normally most customers orders basic fried chicken. It means it’s a better method for sites like blogs that don’t update content frequently.
Thus, I used SSG in this blog system, and the blog is now light and fast.
2. Why Notion
I used notion as editor of this blog.
I like the notion: good design and markdowns. However, the biggest reason why I want to use notion as editor of the blog is high-performance database table functions.
I can date information and tag information as hashtags with coloring that makes high visibility. Also, I can filter, sort, and search by using this information on the notion page.
With notion, I no longer need to create a sophisticated editor that is difficult to create and an administration page to manage the articles I have written.
3. React Notion X
React Notion X is a wonderful library. For the reason stated in the previous chapter, I decided to use the notion and have come to the conclusion that I would like to display the post on my blog without changing the notion design.
Then, I found the perfect library which fulfilled my request.
This library provides some functions. One of them is getting notion page data, and just passing that data to NotionRender, it renders that notion page by the same design.
Thanks to the notion and this library, I don’t even have to write the design in CSS anymore.
4. Code
This blog is really simple. Using compornents/notion/index.tsx for get data from notion, then reander at pages/index.tsx and pages/posts/[slug].tsx.
compornents/notion/index.tsx
This code has some functions which get data from notion by using Notion API and notion-client which is provided to get page content for React Notion X render.
Some parts are omitted by using “~~~~”.
getPosts is a function to get data from the notion database table.
This page tells me how to use Notion API for Next.js.
This code is described by the upper article. This code which makes a portfolio with next.js and the notion is really helpful.
This code doesn’t use React Notion X, but this code tells me how to get data from the notion database table.
pages/index.tsx
After using getPosts to get posts data, it filters posts depending on hashtags and puts them in show_posts. The below code is one part in pages/index.tsx.
PostContent is one compornent in layout.
As you can read, it just passes the post received as an argument to the render of React Notion X
Only these two codes are big parts of this blog. I think the reason I was able to develop this blog in such a short time was that I was able to find notion-portfolio-site, a code that did almost exactly what I wanted to do.
5. Reflections
Since I had already created a site with next.js and react-notion-x, I was able to create the blog itself almost in one day, and the below table is how much time I spend to develop
The goal I have established in developing this blog was to finish that within a weekend, and I think using notion and React Notion X was the reason I achieved it.
When developing something, a thinking structure that is easy to develop is just as important as how to code, and I think I came up with a very good way this time, so that was good.
However, I have a reflection point on the coding part. I used “any” and “!” many times for passing compile.
I have only worked with dynamically typed languages so far, so I want to learn not only how to write typescript, but also its philosophy and design patterns of statically typed language.
To sum up, I need to study typescript and statically typed language more, but I think the blog itself was created just fine. I developed a hashtag filter function, so I can make links to show only English pages or Japanese pages.
In conclusion, both Next.js and notion are great, and I will continue to use them!
