Zenn
🍓

Next.js x Cloudflare で さくっとJamstack

2022/10/23に公開
Next.js
React
Cloudflare
Jamstack
tech

はじめに

2022 年 11 月号の Software Designで特集されてた Jamstack の記事がとってもわかりやすかったので、完全に理解しちゃいました。
記事中では、Astro x Cloudflareでデプロイしてましたが、試しにNext.jsを使って試してみました。
そんなにつまづくところはありませんでしたが、Cloudflare へのデプロイが簡単すぎてびっくりしたので、その感動を共有すべく記事にしてみました。

Jamstack

Jamstack の概念を理解するには、2022 年 11 月号の Software Designを読んでもらうのが良いと思いますが、以下にポイントをまとめてみます。

  • パフォーマンス・スケーラビリティ・柔軟性・保守性を高めるアーキテクチャ
  • サイトを生成するプロセス（ビルドプロセス）とサイトをホスティング・配信するプロセス（ホスティングプロセス）を分離する
  • ホスティングプロセスは CDN (Content Delivery Network)に任せる
  • ヘッドレス CMS がよく使われる（必須ではない）
  • ビルドプロセス時に API 経由でヘッドレス CMS 等からコンテンツを取得し HTML を生成する

検索して出てきた記事読んでもよくわからんなぁという感じだったけど、上記記事を読んだら、完全に理解できました。感謝。

Next.js

チュートリアル見ながら、試してみました。
Create a Next.js App | Learn Next.js

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
cd nextjs-blog
npm run dev

http://localhost:3000にアクセスすると動いてることがわかります。

次に、package.jsonを少し変えて、静的サイトにビルドします。

package.json
{
  "private": true,
  "scripts": {
    "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

npm run build

いい感じに、ビルドできたら、GitHub 上にリポジトリを作っておきます。また、ビルドした結果であるoutフォルダは.gitignoreされないようにしておきます。

参考：
Deployment | Next.js
Advanced Features: Static HTML Export | Next.js

Cloudflare

まず、Cloudflare Pagesに Sign Up します。特にクレジットカードは登録する必要がないので、安心して試せました。
アカウントを作ってからは、GUI で操作してたらいつの間にかいい感じの設定になってます。非常に簡単でした。
下記の操作を求められるので、ぽちぽちしてたら準備 OK です。

  1. プロジェクトを作成する
  2. GitHub と連携する
  3. Next.js (Static HTML Export)の設定を選択する

操作画面はこんな感じでした。UI がいい感じなので、特に迷わず操作できると思います。

準備ができたら、Next.js のファイル群を push するといい感じにデプロイしてくれます。驚愕の楽さ x 速さです。今まで苦労してた CICD はなんやったんやという感じです。

他のブランチで push した結果も Preview させてくれます。すごく便利。

試しにブランチを分けて少し修正して push するとこんな画面になりました。いい感じですね。

おわりに

まだ Jamstack の素晴らしさは体験できてませんが、Cloudflare 使った開発体験の良さにびっくりしました。GitHub Pages と大して変わらない気軽さで、CDN の恩恵を受けられるのってすごいっすね。
次は、ヘッドレス CMS 使ってビルド時にコンテンツを組み込むのんを試してみたいなと思います。

（2022/10/24 追記）
ヘッドレス CMS の microCMS を試してみたので、こっちも読んでもらえると嬉しいです。
Next.js x Cloudflare x microCMS で さくっと Jamstack

GitHubで編集を提案

Discussion