個人ブログ開発をしてみた話 #1 〜 Next.js + Strapiで技術ブログを作ることにした理由
はじめに
こんにちは、Akiraです。
このブログでは、学習記録や個人開発の内容を発信していきます。
記念すべき最初の開発記事として、現在開発中の技術ブログについて紹介します。
このブログ自体も個人開発の一環として制作しており、今後は開発過程や技術選定、実装内容についても記事として残していく予定です。
ブログを作ろうと思った理由
これまで学習した内容や個人開発の成果物はGitHubに公開していました。
しかしGitHubだけでは、
- なぜその技術を選んだのか
- 実装中に何に悩んだのか
- どのように問題を解決したのか
といった背景までは伝わりません。
また、エンジニアとして成長していく過程を記録したいという思いもあり、自分専用の技術ブログを開発することにしました。
WordPressではなくNext.jsを選んだ理由
ブログを作る方法としてはWordPressが有名です。
実際に検討もしましたが、今回はNext.jsを採用しました。
理由は主に3つあります。
1. フロントエンド技術を学びたかった
普段の業務ではJavaScriptやReactに触れる機会が多くありません。
そのため個人開発では、
- React
- Next.js
- TypeScript
といったモダンなフロントエンド技術を積極的に学びたいと考えました。
2. デザインの自由度が高い
WordPressは便利ですが、テーマに依存する部分があります。
Next.jsであれば、
- 完全オリジナルデザイン
- コンポーネント設計
- アニメーション追加
など自由度が高く、自分の作りたいものをそのまま実装できます。
3. ポートフォリオとして活用できる
副業や転職を考えた場合、
「WordPressを使える」
よりも、
「Next.jsでサイトを設計・開発できる」
ことを示せる方が技術力のアピールにつながると考えました。
Strapiを採用した理由
ブログ記事を管理するためにHeadless CMSとしてStrapiを採用しました。
Headless CMSとは
記事管理機能だけを提供するCMSです。
フロントエンドとバックエンドを分離して開発できます。
今回の構成では、
- Next.js → 表示担当
- Strapi → 記事管理担当
という役割になっています。
Strapiを選んだ理由
オープンソースのため無料で利用でき、自分でホスティングも可能です。
管理画面が使いやすい
記事作成や画像管理がGUIで行えるため、開発者以外でも扱いやすいです。
APIを自動生成してくれる
コンテンツタイプを作成するだけでREST APIが利用できます。
そのためフロントエンド開発に集中できます。
現在の技術構成
現在の構成は以下のようになっています。
Frontend
├── Next.js
├── TypeScript
├── Tailwind CSS
└── shadcn/ui
Backend
├── Strapi
└── SQLite
Hosting
├── Vercel
└── Railway今後は認証機能の追加も検討しています。
今後実装したい機能
現時点では最低限の記事投稿機能のみですが、今後は以下の機能を追加したいと考えています。
記事検索
タグ機能
カテゴリ機能
関連記事表示
お問い合わせフォーム
RSS配信
Google Analytics連携
SEO改善
また、個人開発実績やポートフォリオとしても活用できるように改善を続けていく予定です。
おわりに
今回は、このブログを開発することになった背景と技術選定について紹介しました。
次回は、
「ブログ開発をしてみた話 #2 〜 システム構成とディレクトリ設計」
についてまとめる予定です。
同じようにNext.jsやStrapiでブログ開発を検討している方の参考になれば幸いです。