Creating Blogs with notion

When trying to figure on how to create the most efficient way to store blogs on a website without constant intervention was a challenge that I wanted to overcome. When doing some research there were tons of ways of doing this, ones were to create a database and the use CRUD to update it on the website, another one was to use markdown files that you can just create, not the most efficient but was also a way. I kind of of let it go then since I couldn’t figure it out.

Then I found out about Notion as it was really easy to use and help me organize tasks that I had planed out to do and to keep me productive. Then later on I found out that there was an built in API to make that happen on what I wanted to make and I didn't really knew that it existed to begin with since I was just using it for personal use. The further more I read into it I seen that I can learn NextJS while also implementing the Notion API at the same time as I wanted to learn/practice my skills with NextJS as the new version came out (NextJS 13.0 app router)

Technologies used

Some of the challenges

When dealing with nextjs app routers I did not know the new ways for rendering pages and how to approach it. Seemly it was pretty straight forward and it was very similar to using react components. The main page about this can be found on the Nextjs site or you can just press here.

After learning how to: Server-side render(SSR) I learnt the new way to create dynamic routes it was pretty straight forward the only issue that I had is that the project that I have created was in typescript so that was a little annoying to get use to.

📑 pages/posts/[id].js

// `pages` directory
import PostLayout from '@/components/post-layout'
 
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
  }
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  return { props: { post } }
}
 
export default function Post({ post }) {
  return <PostLayout post={post} />
}

To this

📑 app/posts/[id]/page.js

// `app` directory
import PostLayout from '@/components/post-layout'
 
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }]
}
 
async function getPost(params) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  return post
}
 
export default async function Post({ params }) {
  const post = await getPost(params)
 
  return <PostLayout post={post} />
}

Rendering

After learning those key data fetching methods I was able to call the Notion API and display something. Now came another thing to consider, all of the data that was getting pulled was just a json so now I had to deal with formatting the Json to a nice looking html. Well there are some troubles since there are still features that I will be adding but some of the following just don’t work since they require a little more work, I will explain.

When the Notion API returns it will return a block of the text that is stored in each page but there a different types that have a different structure. Lets take the ‘toggle list’ for a example it has a different structure as it has a parent and it has children well to render that in html I would have to loop through all of the children, roughly know how to do it but it will take more time and I wanted it to work already here is an example of it not working.

While here is a picture of how it should look like, and how it is displayed in notion.

More Testing

Testing the table in notionAPI render that I have written