MicroCMS+Next.jsでブログを自作する

21 February, 2024

記念すべき第1回目の記事はこのブログ自体についてです。

そろそろ何某かの記事を書いて公開したい！自分だけのブログが欲しい！でもデザインは自由に変更したい！でもブログを書くときの快適性は欲しい！という要望を叶えるために色々調べていたところ、ヘッドレスCMSに辿り着きました。

MicroCMSのテンプレートを使うとかなり簡単に実装できそうだったので作ってみました。

ヘッドレスCMSとは

MicroCMSの記事がわかりやすかったので置いておきます。

ものすごく簡単に言うと、ブログで言えば

ブログの記事を作成する機能
作成した記事を保存する機能
保存している記事をページ上に表示する機能

という機能がありますが、1と2をヘッドレスCMSに任せ、3は自力で作る、みたいな感じです。このブログで言うと1,2をMicroCMS, 3をNext.jsによって実現しています。

MicroCMSとは

MicroCMSは日本製のヘッドレスCMSで、ちょっとしたブログで使う分には無料で使えます。

MicroCMSテンプレート

MicroCMSにはテンプレートが用意されており、それを用いることでヘッドレスCMSが担当しない「3. 保存している記事をページ上に表示する機能」の実装が簡単になります。

テンプレートをgithubからcloneしてくるだけでほとんど実装が完了します。後の手順はリポジトリのREADMEを読んで進めればOK。

本ブログはシンプルなブログテンプレートを使っていますが、シンプルとは言うものの検索機能だったりタグ機能は持っているのでかなり工数の削減ができます。

テンプレートをカスタマイズする

テンプレートのままだとサンプルの画像がロゴに使われていたりするので、独自のロゴで置き換えたりトップページのタイトルを変更したりします。

画像の置き換え

単純に画像を置き換えたものは以下です。

public/logo.svg
public/no-image.png
public/ogp.png

Faviconの置き換え

faviconにsvgが使えるっぽいです。元々あったapp/favicon.icoを削除して代わりにapp/icon.svgを配置します。このままだとfavicon.icoがないよ！と怒られるのでmetadataにiconのパスを書き加えます。

export const metadata = {
  // ※最初から書かれていたものは省略

  icons: { // 追加
    icon: 'icon.svg',
  },
};

メタデータの変更

サイトのtitleやdescriptionを変更します。

 export const metadata = {
   metadataBase: new URL(process.env.BASE_URL || 'http://localhost:3000'),
-  title: 'Simple Blog',
-  description: 'A simple blog presented by microCMS',
+  title: 'Re:heat',
+  description: "torobi's blog.",
   openGraph: {
-    title: 'Simple Blog',
-    description: 'A simple blog presented by microCMS',
+    title: 'Re:heat',
+    description: "torobi's blog.",
     images: '/ogp.png',
   },
   alternates: {
     canonical: '/',
   },
   icons: {
     icon: 'icon.svg',
   },
 };

ヘッダーの画像のaltを変更

 export default function Header() {
   return (
     <header className={styles.header}>
       <Link href="/">
         <Image
           src="/logo.svg"
-          alt="SIMPLE"
+          alt="Reheat"
           className={styles.logo}
           width={348}
           height={133}
           priority
         />
       </Link>
     </header>
   );
 }

フッターの変更

 import styles from './index.module.css';

 export default function Footer() {
   return (
     <footer className={styles.footer}>
-      <p className={styles.cr}>© SIMPLE. All Rights Reserved 2023</p>
+      <p className={styles.cr}>
+        © 202４{' '}
+        <a href="https://140degrees.com/About/profile" target="_blank" rel="noopener noreferrer">
+          torobi
+        </a>
+        . All Rights Reserved.
+      </p>
     </footer>
   );
 }

まとめ

MicroCMS + Next.jsで自作ブログを構築してみました。MicroCMSの記事作成画面は使いやすく、編集中でもWYSIWYG的に表示されるのがいいですね！（正確にはFrontend側の表示がそのまま見れるわけではないのでWYSIWYGではないですが）表だったりリンクの埋め込みプレビューなどは編集画面上でも綺麗に表示されるので見やすいです。表もMarkdown記法だとしんどいですが、MicroCMSだと編集画面でも表として描画されて操作できるのでかなり楽です。この辺りの操作感はNotionと近いかと思います。

公開に際し最低限の変更はここで行いましたが、空き時間にデザイン変更や機能追加なんかもゆっくりやっていきます。