Introduction to Nexon - A Next.js Notion Blog Template

Introduction to Nexon - A Next.js Notion Blog Template

Published
February 4, 2022
Updated
Last updated April 11, 2022
Description
Maybe you should use Notion to build your blog site as well 🎉. This post tells something behind the develepment of Nexon - A Next.js Notion Blog Template.
Progress
Still Working On
Author
🥰
Nexon is a Notion-powered blog template built with Next.js and Vercel. It’s a modified version of nextjs-notion-starter-kit with a special focus on a better blogging experience.
🚧
Nexon is still being actively developed. Keep an eye out! Any and all input is appreciated.

Motivation

What’s the difference between Nexon and nextjs-notion-starter-kit?

Starter Kit is a excellent project. In fact, I should say, it’s maintainer has much more experience than me. So Nexon is only a modifed version of Starter Kit that I would share to you.
The goal of Nexon are:
  1. Always keep up with an updated version of the Starter Kit.
  1. Make sure users can seamlessly migrate from Starter Kit to Nexon.
  1. Add custom features (to bring a better blogging experience) that may not be suitable to merge into upstream. (See Features for more information.)

Why should I use Notion to write blogs?

Traditionally, I wrote my blog post locally with a text editor or Markdown editor. Once the blog post is finished, I rebuild the blog site locally and then push it to GitHub to trigger the CD.
Somehow, there were some distractions in the workflow:
  1. Markdown is good, but not enough.
    1. Some key features are absent from the standard Markdown format, they rely on the implementation.
    2. CSS (proper looking) is important to a blog site, but it’s hard to control that via pure markdown.
    3. It is difficult to edit files across platforms.
  1. Markdown editors can’t fit in the blog site framework.
    1. Extra Markdown syntax, and Images(assets) management are not compatible with the blog site framework.
    2. Even though most Markdown editors support WYSIWYG, what we get in the editor is not what we get in the blog site eventually.
    3. To prevent the two cons above, the users have to refer to the blog site dev mode to adjust afterward.
  1. Extra steps are needed to update the blog site.
    1. Rebuild the site.
    2. Push to Github or your server.
That’s why CMS (Content Management System) plays a role. WordPress is a good example. Actually, it is still a good choice today (if you’re willing to pay). Another excellent choice is Notion.
Notion is a single space where you can think, write, and plan. Capture thoughts, manage projects, or even run an entire company — and do it exactly the way you want.
Free for unlimited use, modern design, and easy sync make Notion one of the best choices to manage blog posts.

Why should I use Next.js (via Vercel) to host the blog site?

Besides Notion, we still have to deal with some tricky things in order to make a good blog site:
  • Deploy
  • CDN
  • Site analysis
  • SEO
  • Generating other files for search engine indexing, RSS, or robots
Those needs are beyond what Notion is capable of. So this is when Next.js and Vercel come in handy. As you can see, Next.js can easily generate a production-ready static site. And Vercel is one of the best free platforms for frontend frameworks and static sites.
 
In conclusion, with the power of these wonderful tools, one can write a blog post in a no-code way:
  1. Open Notion (in anywhere)
  1. Just write

Features

The basic features are provided by nextjs-notion-starter-kit:
  • Next.js / TS / React / Notion
  • Excellent page speeds
  • Sexy LQIP image previews
  • Automatic open graph images
  • Automatic pretty URLs
  • Automatic table of contents
  • Full support for dark mode
  • A quick search via CMD+P just like in Notion
  • Responsive for desktop / tablet / mobile
  • Optimized for Next.js and Vercel
💕Based on that, Nexon also provide these features:
  • Google analytics support
  • Improved Sitemap support with lastmod tag
  • RSS support
  • Override metadata with page properties
  • Embedded Github comments via Giscus
  • Index page with pagination (underdeveloped)
 

Usage & Configuration