【Next.js】ブログをISRからSSGに移行しました【generateStaticParams】

本ブログ「リアル大学生」は、今までNext.js（ISR）とMicroCMSの組み合わせで構成していましたが、レンダリング方式を変更し、Next.js（SSG）へ移行しました。

GitHub

この記事では、SSGへの移行を行なった理由や、移行方法について紹介していきます。

ステップは次の通りです。

最後までご覧いただき、参考にしていただけると幸いです。

移行理由

まずは移行を行なった理由について紹介します。

フェッチ回数削減のため

本ブログは元々ISR（ほぼSSR）を採用していたため、記事に人が訪れるたびにMicroCMSとフェッチしていました。

ただし、MicroCMSにはデータ転送量の制限（月20GBまで）があるため、万が一PVが伸びてしまった際などに、その制限をオーバーしてしまう可能性があります。

制限を超えてしまった場合、APIのすべての機能が停止してしまうため、記事の取得すらできなくなります。

上限を超えてしまった場合の対処法として、

1. 制限の解除まで待つ
2. 有料プランに課金する

の２択がありますが、「制限の解除まで待つ」については、SEOに大きな影響を与えてしまう可能性があり、「有料プランに課金する」については、最安でも4900円かかるため予算的に厳しいです。

SSGに移行すれば、ビルド時のフェッチだけですむため、PVが伸びたとしても制限の心配が無くなります。

パフォーマンス向上のため

SSRやISRの場合、ユーザーがページに訪れた段階でMicroCMSとフェッチを行い、ページを生成します。

対してSSGは、予めMicroCMSとフェッチを行っているため、ページ生成がすでに完了しています。そのため、ユーザーが訪れた段階ではフェッチを行う必要がなく、用意された静的ファイルを表示するだけとなります。

そもそもブログは更新頻度が少ないため、SSRやISRの技術で定期的にフェッチする必要がないと考えています。

これらの理由から、SSGへ移行してページスピードが上昇することを期待しました。

移行方法（実装）

次に移行方法（実装）を紹介します。

output: 'export'

Next.jsをSSGに移行する最初のステップとして、next.config.tsに以下の記述を追加します。

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export', // これを追加
};

export default nextConfig;

この記述を追加することで、レンダリング方式がSSGに変更され、ビルド時に生成される静的ファイルがout/にexportされるようになります。

generateStaticParams

Dynamic Routes（/category/[categoryId]/page.tsxのような動的なパス）を使用している場合は、少し手を加える必要があります。

SSGで実装を行う際はgenerateStaticParamsを使用して、予めDynamic Routesに何が当てはまるのか、定義しておく必要があります（上記例の場合は[categoryId]の部分）。

実装方法は簡単です。/category/[categoryId]/page.tsxを例として、3つのカテゴリーがあるとします。

const categories = ['apple', 'banana', 'lemon'];

export const generateStaticParams = async () => {
  return categories.map((category) => ({ categoryId: category }));
};

// 既存のページコンポーネント
export default async function Page(props: Props) {

categoriesをmapし、Dynamic RoutesであるcategoryIdに配列の要素を与えています。

ビルド

最後に、npm run buildでビルドします。ビルドが完了し、ルートにout/が生成されれば成功です。

npx serve@latest outを実行すれば、SSGのサーバーが立ち上がります。

失ったもの

SSG化によって動作しなくなった機能がいくつかあります。

APIルート

Next.jsには/app/api/email/route.tsのように簡単にAPIを実装できる、APIルートというものがありますが、SSGでこれは動作しません。

そのためAPIを実装したい場合は、別で用意する必要があります。

本ブログでは、お問い合わせフォームでAPIが必要だったため、Vercelのサーバーレスファンクションを使って実装し直しました。

検索機能

以前は、検索時にURLにパラメータを付与し、そのパラメータに基づいて記事を取得する検索機能を実装していました。しかし、SSG では params を取得できないため、この機能は廃止しました。

外部APIを実装して、いつか直そうと思います。

最後に

ここまで、Next.jsをSSR・ISRからSSGに移行する方法について紹介しました。

結果として、冒頭で述べた課題を見事解決することができたため、非常に満足しています。

興味のある方は、ぜひチャレンジしてみてください。

ここまでお読みいただき、ありがとうございました。