エンジニア的ブログ再構築 : Next.js × Tailwind Plusで得る柔軟性

Micro.blogから移行

"Indie Microblogging"というコンセプトに共感し、 X.comのようなプラットフォームに依存せず 長文の記事だけでなくマイクロブログも可能なMicro.blog を昨年から利用していました。 気軽なつぶやきと長文記事を同じプラットフォームで書けて、 Micro.blogのコミュニティーで海外のユーザーとのコミュニケーションも楽しくはありました。

しかし、半年くらい使ってみると次のような点で不満を持ちました。

• 長文記事とつぶやきが混在するので、読みづらい。そのためテーマをカスタマイズ して両者を分離したくなるが、よく考えると本末転倒でないかと思い始めた。Micro.blog自体も 長文を意識したSummery欄を追加したりLongformにフォーカスしたテーマが人気だったり、 コンセプトがブレてきていると感じてしまった。
• やはり、Compose画面が長文には向いておらず、エディタで編集して切り貼りすることが多 く非効率。海外ユーザーはMarsEditを使っているユーザーが多いようだが、 リッチテキストを好きになれない。
• Micro.blogは独自の機能とプラグインとして提供されているテーマ、バックエンドでHugo で構成されており、それぞれの依存からカスタマイズ時の制約が大きく独自のノウハ ウが必要となる。

モダンな技術スタックでブログ

先日に遊びでNext.js + Tailwind CSSでPortfolioサイトを作りましたが、 CMSのような制約がなく、コードで部品を書いていける体験が 楽しかったのでブログも同じような技術スタックで構成することにしました。

Next.jsベースでのブログのStarter Kitのようなものはいくつか存在しますが、 興味から有償のTailwind Plusを購入したので、Tailwind Plusが提供する個人向け Blogの"Spotlight"というTemplateをベースにカスタマイズしました。

Tailwind PlusのTemplateは、完全に動作するReactベースのアプリケーションコード で、Javascript版とTypeScript版が提供されており、Tailwind CSSを利用したUI要素 だけでなく状態管理やルーティング、APIとの連携など本番環境ですぐに使用でき る機能を全て含んでいます。next-themesを利用したダークモード対応やPrismJSを 使ったSyntax Highlight、レスポンシブ対応、画像最適化やコンポーネントのプリ ロードなどは最初から組み込まれています。開発者はこれらのテンプレートを導入す るだけで、最小限のカスタマイズで完全な機能を持つReactアプリケーションを短時 間で構築できると謳われています。

しかし、実際にブログで運用にはそこそこカスタマイズが必要でした。

主なカスタマイズポイントとしては以下のような点です。

• UI/UXの改善：個人用のブログに合わせヘッダー、フッターのカスタマイズ
• 記事管理システム：App Routerの構造を活かしたシンプルなMDXベースの記事管理
• 記事一覧フィルター: 日付でのフィルター機能を追加(デフォルトではページ 制御されていないため)
• コメントシステム：Giscusを使用したGitHubベースのコメント機能

通常であれば、gray-matterやremarkなどを入れてヘッドレスCMSなどからMarkdown記事を取り込み 動的ルーティングで記事を生成するのが美しいのでしょうが、 「そのままMDXで書けばいいか」と割り切ってApp Routerの下に記事を書いていくスタイルにしました。 記事の執筆とサイトのコーディングの区別がつかない今のスタイルは不便もありますが、 気に入っています。HMR¹機能で特に工夫もせずに更新した記事がテスト環境でリアルタイムに 反映されブラウザで確認できる点も気に入っています。

まだ記事の移行も終わっていませんし、元のテンプレートからそのまま未修正のもの もありますが、ぼちぼちと修正していこうと思います。

Deploy先は、AWSのAmazon Amplifyとしました。ゆくゆくメールフォームなども作っ ていきたいと思います。

カスタムコンポーネントの活用

Next.jsとTailwind UIの大きな魅力の1つは、カスタムコンポーネントを簡単に作成 して再利用できる点です。従来のCMSであればプラグインやテンプレートの変更とな り気軽にできませんが、今のスタイルであればTypescriptでコードを書けばすぐに利 用できます。コードなのでClaude CodeなどのAI支援も活用できます。

例えば、ブログ記事の中でレストランやショップの情報を 綺麗に表示するためのコンポーネントを作成しました。

// src/components/ShopInfo.tsx
interface ShopInfoProps {
  name: string;
  address: string;
  osmAddress: string;
  phone: string;
  closedDays: string;
  website?: string;
}

export function ShopInfo({
  name,
  address,
  osmAddress,
  phone,
  closedDays,
  website,
}: ShopInfoProps) {
  // コンポーネントの実装...
}

このコンポーネントを使用すると、以下のように店舗情報を簡単に表示できます。

レストランやカフェだけでなく、様々な店舗情報を表示できます。

このようなコンポーネントは、情報を構造化して表示するだけでなく、スタイリングの一貫性を保ち、コードの再利用性を高めるメリットがあります。MDXの中でReactコンポーネントをシームレスに使用できるのは、このブログシステムの大きな魅力の1つです。

まとめ

Micro.blogからNext.js × Tailwind Plus × Amazon Apmplify(AWS)へのブログ移行は、 モダンなWeb技術スタックを活用するという点で非常に満足のいく選択でした。

新しいプラットフォームでは、以下のようなメリットを実感しています。

• 開発の柔軟性: フロントエンドとしてReactベースのNext.jsを使うことで、好きなようにカスタマイズできる自由度を得られた
• 執筆体験の向上: MDXを使うことで、マークダウンの手軽さとReactコンポーネントの柔軟性を両立できる
• パフォーマンス: 静的生成とエッジでのレンダリングにより、高速なページ読み込みを実現できた
• 学習機会: 実際のプロジェクトを通じて最新のWebフロントエンド技術を深く学べる点も大きな魅力

もちろん、まだ改善点もあります。コンテンツの移行や検索機能の実装、SEO対策など、今後も少しずつアップデートしていく予定です。自分のペースで改良していける点が、自前のプラットフォームの最大の魅力だと感じています。

Next.jsとTailwind Plusの組み合わせは、Webアプリケーション構築だけでなく 個人ブログの構築においても非常に強力なツールセットになっていると実感しています。 興味がある方はぜひ試してみることをおすすめします。