Next.js + supabase の習得
HayashiNext.js と supabaseを習得するために本を探す。
Kindle unlimitedで以下の本を見つけた
-
Next.jsではじめるSupabase 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)
https://amzn.asia/d/aSN1kgl -
Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）: 3時間で本格アプリを開発できるようになる本 Next.jsフルスタック
https://amzn.asia/d/0sBhgGM -
Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）: 3時間で本格アプリを開発できるようになる本 Next.jsフルスタック
https://amzn.asia/d/eLuLJFw
1の本を一通り読んでみたが、最初は2からやるのがわかりやすそう。
ちなみに、
1は TypeScriptで
2/3は JavaScript ベースで書かれている。
Hayashi2の本の著者の方 の Webサイト いろいろ本を出されている
Hayashi進めていく中で、middleware.js で
import { NextResponse } from "next/server"
import { jwtVerify } from "jose"
(...省略)
const decodedJwt = await jwtVerify(token, secretKey)
を実施するあたりで、詰まってしまった。
記載の内容通り進めると
Error: A Node.js API is used (process.getBuiltinModule) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime
at [project]/middleware.js [middleware] (ecmascript) (middleware.js:3:0)
at <unknown> (edge-wrapper.js:2:6)
1 |
2 | import { NextResponse } from "next/server"
> 3 | import { jwtVerify } from "jose"
のエラーが出てしまう。
インターネットで検索しても同様な記載は少ない。
Hayashiいろいろ調べてわかったのが、jose のバージョンの問題らしい。
joseのサイト(https://www.npmjs.com/package/jose) を見ると、バージョン5系までは、
Runtime and Module type が Universal CJS + ESM だったのが、
バージョン6から
Universal ESM のみに変更になったらしい。
試した時点(2025/2/22) で
npm install jose
でインストールできたのが 最新版の 6.0.4
利用されているバージョンは package.jsonを見ることでも確認できる。
npm info jose versions
でインストール可能なバージョンを調べて 5系の最新版が 5.10.0 であるのがわかったので
npm install jose@5.10.0
でバージョンダウンをしたら解決した。
５系はbugfixは終了しているので６系に移行した方が良いが、ひとまず、サンプルを動作させるのが目的なので5系のまま学習を進める。
Hayashi前編で vercelへのデプロイまで実施
APIKEYの管理方法とか、不安な点もあるけど、初学向けということで省略しているんだろうな。
Hayashi後編も一通り実施
環境変数ファイルで、
.env.development
.env.production
というのが出てきて、使い分けに戸惑ったが、以下のサイトをみたら、だいたい理解できた。
ただ、慣例的な話なのか、仕様なのか曖昧でふわっとしている（バージョンによっても違うのかな）
使えるけどすっきりしない。
最後の方にサーバーサイドコンポーネントの話も出てきて全体像が理解できた。
続きとし、同じ著者の方のServerActions に関してはこちらの本に書かれているらしいので、読んでみたい。
Hayashisupabase の Security Advisor から RowLevelSecurity 使っていなかったら警告が来た
