Effect: Implements all the logic to extract, validate, and provide local content (articles) and all related services (e.g. newsletter)
NextJs: The blog runs the latest version of nextjs, using the app directory, server components, and generateStaticParams to generate article pages at build time
MDX: All the articles are written using mdx, and then rendered in html using next-mdx-remote
All the other dependencies add extra features to support these 3 packages:
In the past I was using many different external dependencies to fetch, validate, reload the local content.
Recently I simplified everything to just using node: path and fs 🤝
An Effect is responsible to get all the files from the local data/articles directory, extract all metadata, and return all published articles:
Metadata, slug, and frontmatter
extractMetadata also uses Effect to read each file and extract all the information about the article (slug, raw content, table of contents):
There is more.
Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.
NextJs article pages
The last piece of the puzzle is serving the content using nextjs.
I do this directly using a main function inside page.tsx:
Build articles: generateStaticParams
All the articles are generated at build time.
I use generateStaticParams to provide all the slugs using getAllArticles:
Each page then uses getArticleBySlug from ContentService to extract the content of each single article:
I then provide all the content to the page, or redirect to the index /articles if the slug is invalid:
MDX to html: next-mdx-remote
MDX allows to define some custom react components to reuse in the articles.
next-mdx-remote supports server components using next-mdx-remote/rsc. Just provide the components and the source content (string) and everything just works:
That's all!
Few dependencies, all local, easy to maintain, fast and SEO optimized 🚀
I like to have full control over my content, while also keeping costs at the minimum (both maintenance and infrastructure).
It's super easy to start your personal blog. Highly recommended!
If you are interested to learn more, every week I publish a new open source project and share notes and lessons learned in my newsletter. You can subscribe here below 👇
Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.