Closed2
Next.js(Edge runtime)でNextAuth.jsを動かす
mr_ozin2024-01-03
Vercelではうまくいったが、Cloudflare Pagesだと上手くいかないので一旦クローズ。
執筆時点の情報です。現在開発中なので大きな変更が入っているかもしれません。あまり確定していない箇所もあるので間違いがあるかもしれません。
経由
Next.jsをEdge runtimeで動作させた場合、NextAuth.jsって動くんだっけ?と思って調べたら、下記のIssueで動くと報告があった。
動かすにはbeta版で導入する必要がある。Client/Server Componentsでどうやって動かすのかの対応表は下記に書いてある。
動かす(Vercel)
が、これだけだと動作するコードがよくわからないので、公式のExampleからforkして、Edge runtimeで動くようにして、Vercelにデプロイした。
リポジトリ
デモ
やっていることはClient Componentとして動かす以外のルートに下記を追加した程度。
export const runtime = "edge"
Cloudflare Pagesでは動かない?(@cloudflare/next-on-pages)
2024-01-03 更新
Next.jsをCloudflare Pagesで動作させるためのツールがある。Edge runtimeでの動作を想定したものらしい。
ただ、下記のIssueがある通り、Pages向けのビルドを実行した際にエラーになる。そのためデプロイ出来ない。(NextAuth.jsの組み合わせだと上手くいっていない?原因の切り分けができていません)
2024-01-03時点だと @cloudflare/next-on-pages": "^1.8.3 でビルドはこけなくなったのでデプロイはできた。
が、ログインしようとすると、エラーが出て進めない。
ログとしては下記が出ていた。
POST https://next-auth-edge-example.pages.dev/ - Ok @ 2024/1/3 16:58:48
(error) [auth][error] UntrustedHost: Host must be trusted. URL was: https://next-auth-edge-example.pages.dev/ .Read more at https://errors.authjs.dev#untrustedhost
(error) at ea (__next-on-pages-dist__/functions/middleware.func.js:9:31246)
at er (__next-on-pages-dist__/functions/middleware.func.js:353:51171)
GET https://next-auth-edge-example.pages.dev/api/auth/signin?callbackUrl=https%3A%2F%2Fnext-auth-edge-example.pages.dev%2F - Ok @ 2024/1/3 16:58:48
(error) [auth][error] UntrustedHost: Host must be trusted. URL was: https://next-auth-edge-example.pages.dev/api/auth .Read more at https://errors.authjs.dev#untrustedhost
(error) at __next-on-pages-dist__/webpack/e9146e72f071480886a0c9d55654047c.js:354:37662
at Hr (__next-on-pages-dist__/webpack/e9146e72f071480886a0c9d55654047c.js:354:39350)
at async __next-on-pages-dist__/webpack/619b8906e43c61d2d643fd0d11a3a114.js:10:27780
確認した項目
GitHub 側
-
https://github.com/settings/developers でOAuth App作成、Homepage URL
とAuthorization callback URLはデプロイしたページに対応したものにする
Cloudflare Pages側
- Settings > Environment variablesにて、
.env.localと同じになるように設定 - Settings > Functionsにて、Compatibility flagsの項にて
nodejs_compatを指定
このスクラップは2024/01/03にクローズされました