私のサイトの構成
Next.jsとmicroCMSでポートフォリオサイトをリニューアルした
最近、自分のポートフォリオサイトをリニューアルしました。
今回のリニューアルではフロントエンドに Next.js、ブログの管理には microCMS を採用しています。
サイト: https://shihiro.com
以前のサイトもNext.jsで構築していましたが、ブログ運用の部分にいくつか課題がありました。そこで今回のリニューアルでは、ブログ管理の仕組みを見直し、ヘッドレスCMSを導入することにしました。
なぜmicroCMSを導入したのか
以前はMarkdownファイルを使って記事を管理していました。
この方法はシンプルですが、記事が増えてくるといくつかの問題が出てきます。
- 記事管理がコードベースになる
- 画像管理が面倒
- コンテンツ管理が煩雑になる
そこで今回は ヘッドレスCMS を導入することにしました。
いくつかのサービスを検討しましたが、最終的に microCMS を選びました。
理由は次の通りです。
- APIがシンプル
- 日本語ドキュメントが充実している
- 個人開発でも扱いやすい
サイトの構成
今回のサイト構成は次のようになっています。
Next.js (Frontend)
↓
microCMS (Blog API)
↓
Private VPS (Hosting)
- Next.js：フロントエンドとページ生成
- microCMS：ブログ記事管理
- VPS：サイトホスティング
ホスティングには一般的なPaaSではなく、非公開のVPS環境を利用しています。
microCMSから記事を取得する
今回は microcms-js-sdkは使わず、fetchで直接APIを呼び出す実装にしています。
Next.jsではサーバーコンポーネントからそのままAPIを呼び出すことができます。
async function getBlogPost(id: string): Promise<BlogPost | null> {
const domain = process.env.MICROCMS_SERVICE_DOMAIN;
const apiKey = process.env.MICROCMS_API_KEY;
if (!domain || !apiKey) {
return null;
}
try {
const res = await fetch(
`https://${domain}.microcms.io/api/v1/blogs/${id}`,
{
headers: {
"X-MICROCMS-API-KEY": apiKey,
},
next: { revalidate: 60 },
}
);
if (!res.ok) {
return null;
}
return await res.json();
} catch (error) {
console.error(error);
return null;
}
}
この関数では、microCMSのAPIから指定した記事を取得しています。
ISR（Incremental Static Regeneration）
fetch のオプションで revalidate を指定することで、Next.jsのISRを利用しています。
next: { revalidate: 60 }
これにより
- 初回アクセス時にページ生成
- 60秒ごとにキャッシュ更新
という仕組みになります。
CMSで記事を更新した場合でも、一定時間後に自動で反映されます。
動的ルーティング
記事ページはNext.jsの動的ルーティングを使っています。
/blog/[id]
これにより、microCMSの記事ごとにページを生成できます。
今回のリニューアルで改善した点
今回のリニューアルで、いくつかの点が改善されました。
記事管理が簡単になった
microCMSの管理画面から記事を書くだけで公開できるようになりました。
コンテンツとコードの分離
記事内容はCMSで管理し、サイトのロジックはNext.js側で管理しています。
将来の拡張がしやすい
今後は次のような機能も追加できそうです。
- タグ機能
- カテゴリ
- 関連記事
- 検索
まとめ
今回のリニューアルでは Next.js + microCMS を組み合わせたブログ構成にしました。
この構成のメリットは次の通りです。
- フロントエンドを自由に設計できる
- CMSでコンテンツ管理ができる
- APIベースなので拡張しやすい
個人のポートフォリオサイトや技術ブログを作る場合、
Next.jsとヘッドレスCMSの組み合わせはとても使いやすいと感じています。
今後もブログ機能やサイト構造を少しずつ改善していく予定です。