Next.js(SSG) + Cloudflare Pagesの構成について～利点と注意点～

このWebサイトは、Next.jsで構築したSSG（Static Site Generation）をCloudflare Pagesにデプロイする構成で運用されています。この記事では、その構成の特徴や利点、注意点について解説します。

構成の概要

Next.jsのSSG機能を使って静的HTMLファイルを生成し、それらをCloudflare Pages上でホスティングすることで、高速かつコストを抑えたWebサイト運用が可能になります。

SSG（Static Site Generation）とは

SSGとは、ビルド時にあらかじめHTMLファイルを生成しておく方式です。ユーザーのアクセス時にはHTMLがすでに用意されているため、表示が非常に高速です。

Cloudflare Pagesとは

Cloudflare Pagesは、Jamstack向けの静的サイトホスティングサービスで、GitHubやGitLabとの連携によって簡単にデプロイを自動化できます。また、CloudflareのCDNネットワークにより、世界中に高速な配信が可能です。

利点

• 高速な表示速度： 静的ファイルのため、即座に表示されます。
• グローバルCDN： Cloudflareのエッジネットワークにより、地理的に近いサーバーから配信されます。
• 無料で使える： Cloudflare Pagesは個人・小規模用途であれば無料枠で十分です。
• GitベースのCI/CD： プッシュするだけで自動ビルド・デプロイが可能です。

注意点

• ビルド時間： ページ数が増えるとビルド時間が長くなります。
• 動的ルーティング制限： Next.jsのSSGでは事前に全ページのパスを定義する必要があります（`getStaticPaths`）。
• サーバーサイド処理： APIルートなどの動的機能は、Cloudflare Functionsや別サーバーが必要です。

デプロイ方法の例

Next.jsでビルド後に.next以下の出力をoutフォルダに静的書き出しし、Cloudflare Pagesにアップロードします。

1npm run build
2npm run export

プロジェクトルートにあるpackage.jsonには、次のようなスクリプトを記述しておくと便利です。

1{
2  "scripts": {
3    "build": "next build",
4    "export": "next export"
5  }
6}
7

Cloudflare Pagesの設定では、ビルドコマンドにnpm run build && npm run exportを、出力ディレクトリにoutを指定します。

まとめ

• Next.jsのSSGとCloudflare Pagesの組み合わせは、非常に高速かつ低コストな構成です。
• ビルドやデプロイの自動化がしやすく、保守性にも優れています。
• 一方で、動的な処理が必要な場合はCloudflare Functionsなどとの組み合わせが必要です。

このWebサイトも、同じ構成で運用されており、高速表示と運用のしやすさの恩恵を受けています。