Overview

This project was originally developed, released, and operated as my personal portfolio site. The initial goal was to create a central place to showcase my portfolio projects and learning progress, while also gaining experience with modern development practices such as building with Next.js, setting up testing, automating deployments with GitHub Actions, and integrating a headless CMS (microCMS).

After launching and running the first version for some time, I continued building additional Next.js projects and experimenting with a simple full-stack setup using Node.js and Express. Through these experiences, my understanding of Next.js deepened.

With this new perspective, revisiting the existing codebase made it clear that I would approach several architectural decisions differently today. As a result, I began to feel that the original implementation no longer fully reflected my current understanding.

Version 2 is a reconstruction of the same site — with nearly identical UI — but with a simplified and more framework-aligned architecture. The goal was not to redesign the interface, but to refine the internal structure and reflect what I learned through continued study and experimentation.

What I Learned

Version 2

• Simplified URL-driven state management by relying on Link instead of router.push and useState, enabling Server Component rendering.
• Refactored data transformation logic to run once before rendering, rather than executing lookups inside every map iteration.
• Reused existing types with Pick to avoid duplicated type definitions and prevent mismatches between API response types and UI prop types.
• Enhanced metadata with Open Graph tags.
• Added sitemap and robots configuration to align with common web and SEO practices.
• Refined testing strategy by focusing on meaningful logic tests instead of superficial UI assertions.
• Separated logic from UI components to enable cleaner unit testing.

Version 1 — Initial Implementation

• Set up CI/CD with GitHub Actions and Vercel.
• Integrated microCMS as a headless CMS.
• Implemented initial URL-based state management and API-driven data fetching.
• Configured testing and linting for a Next.js project.

For a detailed breakdown of the initial implementation, see the v1 repository.

Tech Stack

• Version 2 does not use GitHub Actions. Deployment is handled by connecting the GitHub repository directly to Vercel.
• Type checking and tests run on pre-push hooks using Husky.

Architecture Improvements

In Version 1, URL-based state and data fetching relied on router.push, useState, and API Routes (see Version 1 implementation).
This approach worked, but it was largely influenced by the tutorial I had followed at the time.

In Version 2, pagination and category switching in the Notes list are implemented using the Link component, enabling URL-driven state without client-side routing logic (see Version 2 implementation). By keeping these components as Server Components, data can be fetched directly using shared utility functions. As a result, API Routes were removed from this project’s architecture, reflecting a clearer understanding of when they are actually necessary (e.g., mobile or third-party clients).

Features

microCMS Integration

Content is managed in HTML format on microCMS, making it easy to maintain and scale as articles grow. Styling for HTML elements is handled via global CSS classes defined in globals.css, and class names are applied directly in the HTML stored in microCMS.