個人ブログ開発をしてみた話 #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を立ち上げて、最初の画面を作るところまでを書いていきます。
開発中に詰まったことや、なぜその実装を選んだのかも含めて、記録として残していきたいと思います。