Create Personal Site With Next.js 13 (app router) and MDX
Project Setup
Two folders will be created.
- one folder build the pages and logic of the website, which is based on Next.js (v13.4 app router)
npx create-next-app@latest mysite
npn run dev
- the other folder holds all the .mdx files for blog posts. This folder will sync to a github repository.
mkdir blogposts
cd blogposts
vim first-post.mdx
mysite project(next.js) will fetch blog posts(hosted on github) using next-mdx-remote plugin.
note: file name should be lower case, I met problem when capital letter is included in filename that next.js can not render the page. The console display "Document not found" error.
File Tree of mysite app folder
There is a wonderful article which visualize the Next.js app router mechanism.
Below is my set up:
Markdown and MDX
What is Markdown?
Below is quoted from next.js document
Markdown is a lightweight markup language used to format text. It allows you to write using plain text syntax and convert it to structurally valid HTML.
TailwindCSS provides a typography plugin 'prose' that will turn the Markdown text into nice-looking web page.
Images
- local image (in the same repository /public/img)
use relative path for the source URL like this: /img/avatar.png
- remote image hosted on github (in my blogpost repository)
use URL like this: https://raw.githubusercontent.com/[account]/blogposts/main/images/avatar.png
Static Site Generation (SSG) or Server Side Rendering (SSR)
It's recommended to use SSG whenever possible because the pages can be built once and served by CDN, which makes the page loading super fast. If the page can be pre-rendered ahead of a user's request, then we should choose SSG.
The typical use cases includes:
- Blog posts
- Landing pages
- Documentation
- Product listing
On the other hand, if the page content change requently, we should use SSR instead. SSR is slower than SSG, but the pre-rended page will always be up-to-date. Or we can skip pre-rendering and use client-side Javascript to populate data, which surely will be slower than SSR.
ISR(incremental Static Regeneration)
in order to test ISR(incremental Static Regeneration), we need to build project
npm run build
Incremental static regeneration (ISR) is the architecture behind Next.js that allows pages to be updated after a site has been built and deployed. Compared to server-side rendered (SSR) pages and statically-generated pages, ISR pages have distinct advantages. They are not rebuilt for each user, so they load quickly
Test on-demand revalidate
in browser: http://localhost:3000/api/revalidate?path=/blog/[slug]&secret=somethingonlymeknow
replace http://localhost:3000 to the real domain once deployed
the secret is set in .env.local MY_SECRET_TOKEN