Recently I developed my website with Notion API. This article tells what I learned, including the Notion file link issue.

The requirements for my website that I had at the beginning stage was below,

1. It should be easy to write an article in Markdown format.
2. It should be available to publish a post an article on multiple platforms(Mac, iPad, iPhone, and web).
3. Uploading an image should be seamless in the writing flow without additional tasks.
4. Managing blog articles and portfolio posts should be easy, like the WordPress administrator page.
5. The maintenance cost should be as much as cheap.

CMS(Content Management System)

In the beginning, I thought the Contentful as the CMS for my website. But, I felt that the second requirement could be challenging because it doesn’t have a client app to manage records. Also, the cost could be increased in the future.

Then, the Notion API came to my mind, and I have used Notion as my internal CMS since Notion was launched. Also, I like the database table in Notion to manage pages(records). So I started to look into the Notion API. After my research, I acknowledged that Notion is perfect for my needs. It’s free. It’s a universal platform. It’s markdown friendly.

Vercel

I decided to use Vercel. It’s also free for a non-commercial website. Vercel is the best for developing and deploying a website using Next.js.

Problem

I decided to develop my website using SSG(Static Site Generation) with Next.js. But, the problem that I faced was an expiring file link in Notion. Notion provides an image link as AWS S3 pre-signed URL that expires after 1 hour.

Using ISR(Incremental Static Regeneration)

For example, if an article data from Notion has images, the image links will be expired after 24 hours. In this case, I should call the Notion API again to get the refreshed image links. It was a significant issue. I tried to use ISR(Incremental Static Regeneration) with the revalidate configuration. But, the image loading issue still exists.

Using Next.js Image API

I tried Next.js Image API to solve this issue. I added the minimCacheTTL field to next.config.js and set the value as 86400 * 365, which means 365 days long. But, it still doesn’t solve the issue.

Finally, I switched SSG to SSR(Server Side Rendering) to fix this issue.