microCMS+Next.js+Vercel+お名前.comで独自ドメインのブログを作る

Posted at 2025-03-09

はじめに

個人ブログをある程度カスタマイズ性高く実現したい！と思ったので、勉強がてらmicroCMSを使ってみました。
各種SNSアカウントは一応持っていますが、今までの活動記録等をまとめていなかったのが制作背景にあります。

microCMSとは

microCMSはAPIベースの日本製ヘッドレスCMSです。
快適な管理画面により、開発・運用コストを大きく削減することで、ビジネスを加速させます。

従来のCMS…例えばWordPressはフロントエンドとバックエンドが密結合でした。
PHPをベースにしているものの、WordPress独自の設定や書き方が多数存在し、コンテンツ管理のバックエンドと、コンテンツ表示のフロントエンドを分離することができませんでした。
また、全世界で最も使われているシステムであるがゆえに攻撃に最も晒されやすいCMSでもあり、WordPressやPHP、プラグイン等をセキュリティ対策でバージョンアップしていく際、オールインワンであるがゆえに管理が煩雑で運用コストがかかります。

microCMSはヘッドレスCMSであり、コンテンツ管理のバックエンド管理画面とAPIのみを提供します。
よってフロントエンドはNext.jsやアプリ等、自由な環境で開発が可能となります。
バックエンドはシンプルなAPIを提供しているにすぎず、基本的にフロントエンドのバージョン追従をしていけば良いです。

オールインワンでないためフロントエンドは自前で用意する必要があるのですが、ゼロから構築するのは大変！
と思いきや、microCMSテンプレートというサービスも存在するため、フロントエンドもテンプレートから簡単に作成可能です。

テンプレートからの作成

microCMSへの登録方法は割愛します。
Hobbyプラン（無料）で開始できますが、2週間は上位プランのトライアルができます。
今回使うブログは APIが3個と無料プランの範囲内なので、無料 で使い続けることができます。

テンプレートは以下を選択します。

「このテンプレートを使用」ボタンを押して、GitHubリポジトリを作成します。

とりあえず名前はsimple-blogのように付けます。

作成が完了したらGitHubリポジトリに飛び、READMEの指示に従って動かします。

ローカル環境での立ち上げ

リポジトリをcloneしてきます。sshキーの登録等は割愛します。

$ git clone git@github.com:{YOUR_GITHUB_NAME}/simple-blog.git
Cloning into 'simple-blog'...
remote: Enumerating objects: 91, done.
remote: Counting objects: 100% (91/91), done.
remote: Compressing objects: 100% (77/77), done.
remote: Total 91 (delta 8), reused 63 (delta 1), pack-reused 0 (from 0)
Receiving objects: 100% (91/91), 1.15 MiB | 1.33 MiB/s, done.
Resolving deltas: 100% (8/8), done.

cloneが終わったらディレクトリに移動してVSCodeで開きます。

$ cd simple-blog
$ code .

.envファイルを配置します。Credential情報なのでGit管理下に置かないように気を付けましょう。

.env

MICROCMS_API_KEY=xxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx
BASE_URL=http://localhost:3000

MICROCMS_API_KEY
microCMS 管理画面の「サービス設定 > API キー」から確認することができます。

MICROCMS_SERVICE_DOMAIN
microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。

$ npm install
$ npm run dev

ページが立ち上がります。

コンテンツの登録

記事が無いとイメージが湧きづらいので、microCMSの管理画面からコンテンツを登録します。

タグ
- 自己紹介→公開
ライター
- 自分の情報を登録→公開
ブログ
- 自己紹介のテキストを入力→公開

コンテンツを登録すると、ブログ記事が追加されているはずです。
一覧が変わっているかと、記事ページや検索がちゃんと動くか試してみてください。
画面が変わらない場合はスーパーリロードを試してみてください。

Vercelへのdeploy

ローカルで動くことが確認できたら、Vercelにdeployして本番環境を構築しましょう。
Vercelの登録方法は割愛します。

Vercelを開いたらリポジトリを連携します。
Missing Git repository? Adjust GitHub App Permissions →
のリンクからGitHubに飛び、simple-blogリポジトリを許可します。

するとVercelで連携できるようになるので、Importを押します。

値は以下のように選択します。デフォルトのままでOKのはずです。
環境変数として、.envファイルから以下2行をコピペします。ちなみに一気に2行イコールごとコピペすれば、いい感じに行列に分割して貼り付けしてくれます。

BASE_URLはdeployするとURLが決まるので、その後設定します。今は未登録でOKです。

.env

MICROCMS_API_KEY=xxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx

無事にdeployが成功したらページを見てみましょう。
URLをコピーし、Settings→Environment VariablesにBASE_URLと、vercelの本番環境URLを貼り付けましょう。

こうなっていればOKです。

テキスト情報の調整

ブログのテキストを差し替えます。
ロゴやOGPは画像ですが、今回は割愛します。必要であれば画像も差し替えてください。

ブログタイトルを変える

app/layout.tsx

 export const metadata = {
   metadataBase: new URL(process.env.BASE_URL || 'http://localhost:3000'),
-  title: 'Simple Blog',
-  description: 'A simple blog presented by microCMS',
+  title: 'サンプルブログだよ',
+  description: '説明入力する',
   openGraph: {
-    title: 'Simple Blog',
-    description: 'A simple blog presented by microCMS',
+    title: 'サンプルブログだよ',
+    description: '説明入力する',
     images: '/ogp.png',
   },

【既知の不具合】
トップページのmetadataがhtml上では反映されているのに、Vercel環境のURLをシェアしても反映されません
解決法ご存じの方いらっしゃったら教えてください

コピーライトを変える

components/Header/index.tsx

 export default function Footer() {
+  const currentYear = new Date().getFullYear();
   return (
     <footer className={styles.footer}>
-      <p className={styles.cr}>© SIMPLE. All Rights Reserved 2023</p>
+      <p className={styles.cr}>© {Your Name}. All Rights Reserved {currentYear}</p>
     </footer>
   );
-}
+}

※立ち上げ年のベタ書きでもOK

投稿日のフォーマットを変える

libs/utils.ts

 export const formatDate = (date: string) => {
   const utcDate = new Date(date);
   const jstDate = utcToZonedTime(utcDate, 'Asia/Tokyo');
-  return format(jstDate, 'd MMMM, yyyy');
+  return format(jstDate, 'yyyy/M/d');
 };