<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"></a>Content</h2>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#the-existing-site">The Existing Site</a></li>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#the-tagging-system-design">The Tagging System Design</a>
<ol>
<li><a href="#1-an-nextjs-api-endpoint">An Next.js API endpoint</a></li>
<li><a href="#2-pre-generated-data">Pre-generated data</a></li>
<li><a href="#3-manifest-file">Manifest file</a></li>
</ol>
</li>
<li><a href="#the-ui">The UI</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"></a>Introduction</h2>
This site that I am using to host all my articles is using Next.js or specifically Vercel.
The approach that I took to hosting this site is to keep it as simple as possible.
This is because I rather not have the hassle to the infrastructure burden, so everything is to be as simple as possible.
I recently re-visited the usability of my site, and I realized a lot of my articles are hidden behind the “Writing” link.
It was difficult to know what articles were available or even find relevant articles.
So, this led me explore options, and one of the ways that many blogs (ie Wordpress sites) do this is via a tagging system.
This article will discuss the architecture behind how to build a simple one using Next.js (with Vercel).
<h2 id="the-existing-site"><a href="#the-existing-site" aria-hidden="true" tabindex="-1"></a>The Existing Site</h2>
Before making any adjustments, let’s take a look at how my site generate the articles.
Like I said, my site is very simple with no external integrations, no CMS, no Database.
It’s just using Markdown.
How does the markdown get on the site ?
<ol>
<li>
The utility will read the markdown (<code class="language-">*.md
</code> extension)
</li>
<li>
Extract and transform the metadata from it
</li>
<li>
Next.js will render all of that information (using <code class="language-">getStaticProps
</code>)
</li>
</ol>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/tagging-system-existing.png" alt="Existing workflow for generating articles" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Existing workflow for generating articles</blockquote>
 </div>
</div>
Ideally, for simplicity, I wanted to keep this same workflow and layer on a tagging system.
(Because I am lazy 😂)
Let’s talk about how we can go about to doing that.
<blockquote class="common">
💡 Note:
My site uses Static Site Generation (SSG) because everything comes from the markdown, and I don’t deploy that often.
Occasionally, I do deploy for edits or release new articles.
</blockquote>
<h2 id="requirements"><a href="#requirements" aria-hidden="true" tabindex="-1"></a>Requirements</h2>
Since this is my personal site, the aim is to optimize for simplicity.
This means one of key goals for me is to have the least amount of infrastructure burden.
The requirements:
<ul>
<li>
Keep it as simple &#x26; minimal as possible
</li>
<li>
Maintain the existing flow (Pagination etc)
</li>
<li>
No external integration (ie no DB, no CMS)
</li>
<li>
No Infrastructure burden
</li>
</ul>
Even though this may not be the “best practice”, it made sense for me given my constraints.
<h2 id="the-tagging-system-design"><a href="#the-tagging-system-design" aria-hidden="true" tabindex="-1"></a>The Tagging System Design</h2>
Now comes the idea.
The idea that I had in mind was an API that returns articles based on the <code class="language-">tag
</code> provided in the query string.
Let’s go through the components in more detail.
<h3 id="1-a-nextjs-api-endpoint"><a href="#1-a-nextjs-api-endpoint" aria-hidden="true" tabindex="-1"></a>1. A Next.js API endpoint</h3>
This will return the data based on the <code class="language-">tag
</code> query in the URL.
For Example:
<ul>
<li>/writing?tag=aws - This would return all articles that were tagged with "AWS"</li>
</ul>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/tagging-system-api-server.png" alt="Next.js: Tagging system with API server" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Next.js: Tagging system with API server</blockquote>
 </div>
</div>
Here is an example of the JSON response.
JSON response (sample):
<div class="remark-highlight"><pre class="language-json"><code>{
 "entries": [],
 "pagination": {
 "total": 4
 }
}
</code></pre></div>
This api will read the JSON data directly from the filesystem.
Vercel actually supports this but you do need to configure it 👇.
<blockquote class="common">
💡 Note: 
If you want to support reading from the filesystem, you need to turn on nftTracing on Next.js config.
This allows for “Output File Tracing”, and Next.js will put all the files that need to be read on the production server.
</blockquote>
Now comes the question of: How do we get this data or where does it come from ?
<h3 id="2-pre-generated-data"><a href="#2-pre-generated-data" aria-hidden="true" tabindex="-1"></a>2. Pre-generated data</h3>
In my website, I already have an existing utility for parsing these articles in markdown.
So, to get these new JSON data, I just needed to write another script to aggregate the articles into categories.
I would need to pre-generate the data because we need it available in production when our API reads a particular file.
The file convention: <code class="language-">{name-of-the-tag}-tag.json
</code>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/tagging-system-json-file-system.png" alt="Pre-generating tagging data ahead of time" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Pre-generating tagging data ahead of time</blockquote>
 </div>
</div>
<h3 id="3-manifest-file"><a href="#3-manifest-file" aria-hidden="true" tabindex="-1"></a>3. Manifest file</h3>
As part of the processing (using the script), it will also generate a manifest file which will contain the following:
<ul>
<li>
The tags that are used
</li>
<li>
The number of articles in each tag
</li>
</ul>
Example:
<div class="remark-highlight"><pre class="language-json"><code>{
 "astro": 6,
 "frontend": 7,
 "aws": 35,
 "cloudfront": 11,
 "cdn": 16,
 "edge": 4,
 "aws-lambda": 8,
 "terraform": 11,
 "ci-cd": 5,
 "http-caching": 3,
 "build-system": 2,
 "dev-ops": 7,
 "open-id-connect": 3,
 "postgre-sql": 7,
 "aws-ecs": 7,
 "next-js": 2
}
</code></pre></div>
On the UI, this is the file that I use to render the different tags available on the site.
<h2 id="the-ui"><a href="#the-ui" aria-hidden="true" tabindex="-1"></a>The UI</h2>
Here is what the resulting UI for the tagging system looks like.
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/tagging-system-UI.png" alt="Tagging system UI" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Tagging system UI</blockquote>
 </div>
</div>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"></a>Conclusion</h2>
And... That’s it!
This is a simplified tagging system built with Next.js using Vercel.
Again, this may not be the “best practice” but given the requirements that I had, it worked for me.
There is value in adding constraints, it tends to lead to more creative solutions!
What do you think ? Got any ideas on a different way to build something like this ?
Reach out, and Let me know! I’d love to hear it!
Also, if you learned something new, please share this article with a friend or co-worker 🙏❤️! (Thanks!)

Build a simple tagging system (No database required)

Jerry Chang

Go Back

Next.js: Architecture of a simple tagging system

Enjoy the content ?