ブログをNext.jsへ移行しました

by

@wapa5pow

3年ほど前からwapa5pow.comのドメインでブログをNetlify上のGatsbyで構築していましたがVercel上のNext.jsに移行しました。
当時はMarkdownで書いてGitHubにプッシュするだけでデプロイされて書きやすかったのですが、やりにくい点が多々でてきました。

  • 当時触ったことのないReactの上にさらにGatsbyがのっていて細かいところに手がつけられない
  • Gatsbyのバージョンが古くてnpmモジュールがいれられずSpeaker Deckなどの埋め込みがしずらい
  • OGPの画像を自分で作成しなければいけない
  • Markdownのメタデータにカテゴリを入れるところがあり無駄なものを考えなければいけない

などです。以前Zennのエディタをローカルで動かしたときに編集しやすくこれと同じような感じでローカルで楽しくブログを書きたいなと思い構築しました。
Reactも最近触っていて、VueよりTypeScriptへの親和性が高いのでReactでやることに決めました。その中でZennもNext.jsを使っており開発体験もよさそうなのでNext.jsを選びました。構築してみて結構編集しやすいので気に入っています。

このブログは以下な感じで構築してあります。

  • blog-starter-typescriptのNext.js + Markdown + TypeScriptのテンプレートを使いました
  • ソースコードのシンタックスハイライトはremark-highlight.jsを使用して、ソースコードのタイトルはremark-code-titlesを使っています。
  • OGP画像生成にはcatchy-imageを使っています。作者のブログで使い方がわかります。
  • 既存のブログとはパスがかわったのでここを参考に既存のパスを新しいパスへとリダイレクトしています。
  • Google Analyticsはここを参考にしています。
  • Twitterのシェアはreact-shareでさくっと実装しました

Zennみたく記事のテンプレートを生成できるようにしてありyarn g titleと実行すると_post以下に次のようなテンプレートを生成されるようにしてあります。

---
title: title
date: '2021-03-02T14:10:05.881Z'
---

これで書きたいことに集中できるブログ環境が整いました。ブログは盆栽だと思っているのでこつこつ整えていきたいと思います。
表示も爆速になって最高です。

変更の以前アクセスしていた人からのエラー報告

以前からアクセスしていた人は、Gatsbyで設定されたService Workerが働いていてService Workerが記事をとっていました。
その際にそのService Workerは記事がないと判定してうまく記事が表示されませんでした。

これに対応するためここにあるコードをそのままpublic/sw.jsに配置しデプロイしたらなおりました。Service Workerを削除する対応です。

public/sw.js
if (navigator.serviceWorker) {
  navigator.serviceWorker.getRegistrations().then(function (registrations) {
    for (let registration of registrations) {
      registration.unregister();
    }
  });
}

self.addEventListener('install', function (event) {
  event.waitUntil(skipWaiting());
});

self.addEventListener('activate', function (event) {
  event.waitUntil(self.clients.claim());
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          return caches.delete(cacheName);
        }),
      );
    }),
  );
});