個人ブログ開発をしてみた話 #2

個人ブログ開発をしてみた話 #2

なぜNext.js × Strapiを選んだのか

前回の記事では、個人ブログを作ろうと思った理由や、どのようなブログを目指しているのかについて書きました。

今回は、実際に開発を始めるにあたって、

• なぜNext.jsを選んだのか

• なぜStrapiを選んだのか

• 他にどんな選択肢があったのか

について書いていきます。

ブログを作るならWordPressじゃダメなの？

最初に思ったのは、「ブログならWordPressでいいのでは？」ということでした。

実際、WordPressには以下のようなメリットがあります。

• すぐに始められる

• テーマやプラグインが豊富

• 記事を書くことに集中できる

• 運用実績が多い

ブログを作るだけなら、WordPressが最適解かもしれません。

ただ、今回は「記事を書く場所」だけではなく、「自分の技術力を見せるポートフォリオ」として作りたいと考えていました。

そのため、あえて自分で開発することを選びました。

Next.jsを選んだ理由

1. 学習してきた技術を活かしたかった

現在、ReactやNext.jsを学習しています。

せっかく勉強しているのであれば、実際のサービスとして形にしたいと思いました。

学習だけで終わらせず、アウトプットとして残せるのは大きなメリットだと思います。

2. SEOに強い

ブログを作る以上、検索エンジンから読まれることも意識しています。

Next.jsには、

• Server Components

• SSG

• ISR

• Metadata API

など、SEOに相性の良い仕組みがあります。

技術ブログとして長く運用することを考えると、大きな魅力でした。

3. 将来的に機能追加しやすい

今後は以下のような機能も追加したいと思っています。

• タグ検索

• 有料記事

• お問い合わせフォーム

• ポートフォリオページ

• RSS配信

自由にカスタマイズできる点も、Next.jsを選んだ理由の一つです。

Strapiを選んだ理由

CMSはかなり悩みました。

候補として考えていたのは以下です。

• WordPress

• microCMS

• Contentful

• Strapi

その中で最終的にStrapiを選びました。

1. オープンソースであること

StrapiはオープンソースのHeadless CMSです。

自分で環境を構築できるため、サービス終了や料金変更の影響を受けにくいのが魅力でした。

2. APIベースで扱いやすい

記事データをREST APIやGraphQLで取得できます。

Next.jsとの相性も良く、フロントエンドとバックエンドをきれいに分離できます。

3. Headless CMSを学びたかった

最近では、

• Shopify Headless

• Contentful

• microCMS

• Strapi

など、Headless CMSを採用するケースも増えています。

案件でも活かせる知識になると思い、今回のブログ開発を通して学んでみることにしました。

今回の構成

現在の技術構成は以下のようになっています。

• フロントエンド：Next.js

• CMS：Strapi

• UI：Tailwind CSS

• コンポーネント：shadcn/ui

• デプロイ：Vercel・Railway

この構成で、なるべくモダンな開発を経験してみたいと思っています。

実際に使ってみて感じたこと

まだ開発途中ですが、すでにいくつか苦戦している部分があります。

• Next.jsのデータ取得方法

• Strapiの型定義

• Tailwindの設定

• デプロイ時の環境変数

このあたりは、今後の記事で詳しく書いていこうと思います。

次回予告

次回は、実際にNext.jsプロジェクトとStrapiを立ち上げて、最初の画面を作るところまでを書いていきます。

開発中に詰まったことや、なぜその実装を選んだのかも含めて、記録として残していきたいと思います。