I wanted to document the various projects I'm working on! So I set out to use Next.js, TypeScript, Tailwind CSS and MDX to create blog posts on a new personal site.

I roughly followed this Next.js 13 blog tutorial from Dave Gray which was a revision to Shu Uesugi's pre-Next.js 13 blog example.

Other resources I used:

🔗 Next.js app router

🔗 TailwindCSS with Next.js

🔗 TailwindCSS Typography

🔗 react-icons

🔗 next-themes

What I learned

React 18 New Features

Among the newest React features, components are now server components by default. The "use client" directive must be used explicitly at the top of our component when we want to use browser-only APIs, interactivity/event listeners, state/life cycle effects, or React class components. I learned this when I implemented next-themes for light/dark theme control, which relies on some of these things behind the scenes. With React server components, bundle size does not necessarily grow with app size anymore. Less JavaScript is sent to the client than with traditional React client components, which is one of the reasons why this change is great for performance. Other benefits include having access to the database, and having better security by not exposing API keys and other secrets to the client.

Tailwind's Typography Plugin is so nice!

The prose class that comes with the Tailwind CSS Typography Plugin comes with a default text article syling palette for all the various types of elements from your .md or .mdx files. The only thing out of the box that I didn't like was that backticks for inline code snippets were rendered, so I used some fancy Tailwind selectors to disable them:

<div className="prose prose-code:before:content-none prose-code:after:content-none">
  {content}
</div>

See the Github Issue.

Next.js 13

Using Next.js 13 with the app directory was interesting. While most of it was relatively smooth, I ran into issues while creating this blog with static page generation, which had confusing side effects while in development mode regarding caching and on-demand generation. The cache revalidation settings are what determines how frequently static page regeneration occurs. I learned that while developing I should set cache revalidation to 0 to basically update the data live locally. Similarly, I ended up adding cache: "no-store" to my fetch requests to turn off dynamic data caching, which seemed too complicated / overkill for my use case here. Something else surprising was that a first refresh of the page after the revalidation period has past will only trigger the revalidation in the background. It takes a second refresh for the new data to render. Keep an eye out for a future blog post that goes more in depth on the newest version of Next.js and its app directory.

Todo

• Add some loading UI
• Optimize my Metadata for better SEO
• Add a clap button to posts