Nuxt 4 + @nuxt/content + Vercel：個人ブログにおける技術選定とアーキテクチャ設計

本ブログの技術選定をアーキテクチャ視点から整理。 Nuxt 4 を SSR ブログに採用した理由、 @nuxt/content をコンテンツレイヤーとして選んだ背景、多言語対応・画像最適化・デプロイ・分析における設計判断について。

2025年12月14日

architecture

本記事はチュートリアルではなく、プロジェクト開始時に行った技術選定の記録です。

このブログの目的は UI の実験やフレームワーク学習ではなく、長期的に文章と技術知見を蓄積するためのプラットフォームを構築することです。

アーキテクチャの観点から見ると、本ブログは典型的な content-driven site（コンテンツ駆動型サイト）です。

目的は、コンテンツ制作・パフォーマンス・運用コストの長期的なバランスを維持することにあります。

そのため技術選定では以下を重視しました：

🧭 技術スタック概要

SSG と比較すると、継続的に更新される developer blog において SSR はより安定した初期表示性能と SEO を提供します。

主な理由：

ブログは本質的にコンテンツプロダクトです。

重視した点：

この構成は static-first architecture に近く、 Strapi や Contentful のような Headless CMS の運用コストを回避できます。

@nuxt/ui が基盤コンポーネントを提供し、 Tailwind がデザイン調整を担います。

初期段階から多言語対応（zh / ja / en）を前提に設計。

利点：

画像はパフォーマンス上の主要リスクです。

二層構成：

事前にサイズを定義することで Cumulative Layout Shift（CLS）を効果的に削減できます。

理由：

コンテンツサイトを継続的に改善していくためには、フィードバックループの存在が欠かせません。アクセス解析ツールとしては、デプロイプラットフォームに付属する分析機能ではなく、 Google Analytics (GA4) を採用しています。

主な理由は次の3つです。

個人ブログにおいて、実際に必要な分析内容はそれほど複雑ではありません。

GA4 はイベントベースのデータモデルを採用しており、従来のアクセス解析よりも構造は複雑ですが、ブログのようなサイトでは基本的なページビュー計測だけでも十分な分析が可能です。

Nuxt プロジェクトへの GA4 の導入も比較的簡単で、 nuxt-gtag モジュールを利用すればアプリケーションレベルで統一的に組み込むことができます。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-gtag"],
  gtag: {
    id: "G-XXXXXXXXXX",
  },
});

本構成は developer blog architecture の実践例であり、技術的な複雑さではなく、長期的なコンテンツ生成を支えることを目的としています。