chooblarin’s blog

ブログをGatsbyからNext.jsに移行した

November 28, 2020

  • #Blog
  • #JavaScript

ブログをHugoからGatsbyに移行してから2年が経過しました *。

そして今回，Gatsbyから Next.js への移行を完了しました。

動機

今回のブログ移行には特に合理的な動機はありません（2年おきに気分でブログを移行している…）。

GatsbyもNext.jsも静的サイトの開発に適しています。2年前にブログの移行先を検討していたとき，Next.jsはサーバーサイドレンダリング (SSR) のフレームワークでした。そこから時を経て静的サイト作成 (SSG) を推奨するReactフレームワークとして進化したようです。実際にはSSRとSSGのハイブリッドを行うことができて，いくつかのページを静的に生成し，一部のページをサーバーサイドでレンダリングするといったことが可能です。

2年前に調べた時に比べるとNext.jsの開発者体験はかなり向上しています。Hot code reloadingやデフォルトのTypeScriptサポートなど，フレームワークとしての洗練され具合には惚れ惚れします。

移行作業

GatsbyからNext.jsへの移行作業はそこまで大変ではありません。Next.js公式の移行ドキュメント を参考にしつつ作業を進めました。

GatsbyではGraphQL APIでデータを取得して静的ページを生成しています。その際に様々なプラグインを追加することで，Markdownのパースや変換処理，画像の最適化処理，Webサイトのメタデータの生成などが行われる仕組みでした。

私のサイトでは主に以下のGatsbyプラグインを使用していました。

  • gatsby-plugin-manifest
  • gatsby-plugin-react-helmet
  • gatsby-source-filesystem
  • gatsby-transformer-remark
  • gatsby-plugin-google-analytics

データ取得・変換

ブログ記事のデータはMarkdown形式のファイルです。

Gatsby使用していた gatsby-transformer-remark を踏襲して，remark を使ったMarkdown処理を採用しました。ソースコードのハイライトには highlight.js を使いました。

import matter from "gray-matter";
import remark from "remark";
import html from "remark-html";

const source = fs.readFileSync(filepath, "utf-8");
const { content, data } = matter(source);

const markdown = await remark()
    .use(highlight)
    .use(html)
    .process(content)
    .toString();

メタデータやOGP

Gatsbyと一緒に使用していた react-helmet は next/head で置き換えることができると公式サイトの移行ガイドでも紹介されています。

私はnext-seo というサードパーティのライブラリで対応しました。

Google Analytics

Gatsbyではプラグイン (gatsby-plugin-google-analytics) を入れて済ましていましたが，Next.jsでは以下のように実装しました。ついでに analytics.js から gtag.js への移行も行いました。

// _app.tsxのCustom Appコンポーネント
function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  React.useEffect(() => {
    const type = "routeChangeComplete";
    const handler = (url: string) => pageView(url);
    router.events.on(type, handler);
    return () => router.events.off(type, handler);
  }, [router.events]);

...

デプロイ

このブログはGitHub Pagesでお手軽に運用しているのですが，今更ながらGitHub Actionsでデプロイを自動化しました。 GitHub PagesにデプロイするActionは山ほどありますが，その中から github-pages-deploy-action を使わせてもらいました。

おわりに

というわけで本ブログをNext.jsに移行しました。Gatsbyではプラグイン任せだった箇所も自分が好きなようにカスタマイズできるようになったと思います。

今年はブログを一切更新しないままもうすぐ年末です。来年から本気出す。