[Personal Development] Developed a tech blog that can integrate Qiita articles with internal blogs

Introduction

In this personal development project, I integrated the Qiita API and MicroCMS to build a tech blog that automatically collects and displays Qiita and internal technical articles.

App Overview

On the home page, Qiita and MicroCMS articles are displayed in a card UI.
Clicking the "See More" button takes you to the list pages for personal articles and blog articles, respectively.
Clicking on an article card takes you to the Qiita article page or blog details page, where you can read the article directly.

The app we created uses Next.js (Turbopack + TypeScript), TailwindCSS, DaisyUI, MicroCMS, and the Qiita API to automatically retrieve Qiita articles, retrieve MicroCMS articles, display them as a list using a card UI, create a blog detail page, use CI/CD (GitHub Actions), and even automatically deploy to Firebase/Vercel.

Technologies Used

Development Difficulties and Solutions

Unifying the Data Structures of Qiita and MicroCMS Was Difficult

Qiita and MicroCMS differ significantly in the data formats and field names they can acquire, making it impossible to use common UI components as is.

Example: Qiita data
{
"title": "Introduction to React",
"created_at": "2024-01-02",
"url": "https://qiita.com/xxx/items/abc123"
}

Example: MicroCMS data
{
"id": "blog01",
"title": "Building a blog with Next.js",
"publishedAt": "2024-02-10",
"thumbnail": { "url": "https://..." }
}

Date formats, URLs, thumbnails, etc. were all inconsistent, making it extremely difficult to unify and handle them on the front end.
So, as shown below, we reformatted the articles into a uniform format on the API Route side before returning them to the front end.

return {
title: item.title,
thumbnail: item.thumbnail?.url || DEFAULT_IMAGE,
date: item.publishedAt || item.created_at,
url: item.url || `/blogs/${item.id}`,
};

It was difficult to unify the card UI between DaisyUI and TailwindCSS.

Qiita and MicroCMS differ in the presence or absence of thumbnails and image size,
which easily disrupted the card height and layout.

In addition, responsive support and grid adjustments were required, making it surprisingly difficult to create a card design that looked consistent across all posts.

Points I learned and grew from

I gained a deeper understanding of API design and data formatting.

I was able to understand the process of data acquisition → formatting → return using API Route.

I gained a practical understanding of Next.js server-side processing.

I gained experience using Next.js's server functions, including route handlers, environment variables, and asynchronous processing.

In particular, I believe I gained practical knowledge essential for production development, such as calling external APIs and designing JSON responses.

Conclusion

This development project involved a wide range of technologies, including Qiita, MicroCMS, Next.js, and CI/CD.
However, by breaking down the MVP into smaller parts, I was able to implement it without any hesitation.