Next.js でのエラー Module not found: Can't resolve 'fs' の対処方法
Next.js で次のようなエラーが出たときの対処方法についてです。 確認時のバージョン Node.js 16.x Next.js 12.x / 11.x 問題 Next.js を実行すると（＝ や を実行すると）次のメッセージを含むエラーが出て処理が途中で止まってしまい…
SSG
Gatsby でパンくずリストを作る方法
Node.js ベースの SSG のひとつ Gatsby でパンくずリストを実装する方法についてかんたんにまとめました。 私は Gatsby で実装しましたが、基本的な考え方は他の SSG でも同じと思いますので他の SSG を使う方にも参考になるかもしれません。 対象バージ…
静的サイトジェネレーターと相性のよいホスティングサービス一覧（ 2021 年時点）
2021 年 7 月時点における「静的サイトジェネレーターと相性のよいホスティングサービス」をかんたんにまとめました。 「静的サイトジェネレーター」は長いので以下「 SSG 」と書きます。 選定基準は次のとおりです: SSG ・ Jamstack 界隈で有名 特定の SSG に…
Next.js を使った Jamstack なブログの始め方
今回は Next.js を使って Jamstack なブログを作る方法を紹介します。 ゴール 本チュートリアルでは最終的に以下の構成のブログサイトを作ります。 ページ構成 「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の 3 つだけのシンプルな構成です。 投稿の管理方法…
Gatsby 公式のプラグイン・テーマまとめ
React ベースの静的サイトジェネレータ（ SSG ）である Gatsby が公式に提供するプラグインとテーマについてまとめました。 正確には、公式の monorepo リポジトリ ↓ で管理されているプラグインとテーマを一覧にしました。 記事執筆時点で monorepo に…
Gatsby で Google Analytics Reporting API を使って人気の投稿一覧を作成する方法
今回は静的サイトジェネレーターの Gatsby を使ったプロジェクトにおいて Google Analytics Reporting API v4 を使って投稿一覧を作成する方法を紹介します。 前提 今回は 2020 年時点で最新の Reporting API v4 を使います。…
Next.js と Gatsby の比較（ 2020 年 5 月時点）
この記事は 2020 年時点の古い記事です。現在は状況が大きく異なっているためご注意ください。 最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と G…
Gatsby で gatsby-theme-blog を使うときの tips
Gatsby 公式のブログ用テーマ を使うときの tips 集です。 追記 2020/07/29: この説明は のバージョン 系に対するものです。 2020 年 7 月にリリースされた にはあてはあまらない部分もありますのでご注意ください。 Gatsby の theme…