Closed3

Next.jsチュートリアル

Next.js
tutorial
Supabase
BearBeeBearBee

Next.jsのチュートリアルのDB周り（6章）でつまづいた。
https://nextjs.org/learn/dashboard-app/setting-up-your-database

ストレージにSupabaseを選択すると次の7章でエラーになる。

 ✓ Compiled /dashboard in 2.2s
Fetching revenue data...
Fetching revenue data...
Database Error: Error [NeonDbError]: Error connecting to database: fetch failed
    at execute (node_modules/.pnpm/@neondatabase+serverless@0.9.5/node_modules/@neondatabase/serverless/index.mjs:1545:24)
    at async fetchRevenue (app/lib/data.ts:20:17)
    at async Page (app/dashboard/page.tsx:8:18)
  1543 | Neon-Batch-Read-Only"]=String(ye)),xe!==void 0&&(me["Neon-Batch-Deferrable"]=String(
  1544 | xe)));let se;try{se=await(k??fetch)(j,{method:"POST",body:JSON.stringify(ce),headers:me,
> 1545 | ...ee})}catch(oe){let U=new Ae(`Error connecting to database: ${oe.message}`);throw U.
       |                        ^
  1546 | sourceError=oe,U}if(se.ok){let oe=await se.json();if(Array.isArray(A)){let U=oe.
  1547 | results;if(!Array.isArray(U))throw new Ae("Neon internal error: unexpected resul\
  1548 | t format");return U.map((K,le)=>{let It=w[le]??{},Xs=It.arrayMode??R,eo=It.fullResults?? {
  severity: undefined,
  code: undefined,
  detail: undefined,
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: undefined,
  line: undefined,
  routine: undefined,
  sourceError: TypeError: fetch failed
      at async execute (node_modules/.pnpm/@neondatabase+serverless@0.9.5/node_modules/@neondatabase/serverless/index.mjs:1544:20)
      at async fetchRevenue (app/lib/data.ts:20:17)
      at async Page (app/dashboard/page.tsx:8:18)
    1542 | isArray(A)&&(he!==void 0&&(me["Neon-Batch-Isolation-Level"]=he),ye!==void 0&&(me["\
    1543 | Neon-Batch-Read-Only"]=String(ye)),xe!==void 0&&(me["Neon-Batch-Deferrable"]=String(
  > 1544 | xe)));let se;try{se=await(k??fetch)(j,{method:"POST",body:JSON.stringify(ce),headers:me,
         |                    ^
    1545 | ...ee})}catch(oe){let U=new Ae(`Error connecting to database: ${oe.message}`);throw U.
    1546 | sourceError=oe,U}if(se.ok){let oe=await se.json();if(Array.isArray(A)){let U=oe.
    1547 | results;if(!Array.isArray(U))throw new Ae("Neon internal error: unexpected resul\ {
    [cause]: [Error: getaddrinfo ENOTFOUND api.pooler.supabase.com] {
      errno: -3008,
      code: 'ENOTFOUND',
      syscall: 'getaddrinfo',
      hostname: 'api.pooler.supabase.com'
    }
  }
}

6章に戻り、SupabaseからNeonに変えたところ、コードの変更なしで動いた。

何で動かなかったのか理解できていないが、NeonDbErrorとログにあるのでDBコネクションがSupabaseで確立できていないみたい。

これだと問題なくて

import { db } from "@vercel/postgres";
const client = await db.connect();
await client.sql

これだとNG

import { sql } from '@vercel/postgres';
await sql
BearBeeBearBee

チュートリアルはひとまず完了。
ローカル環境ではうまく動いているようだ。

ただ、vercelにデプロイするとログインで404になる。
ログには以下のエラーが出力されている。

MissingSecret: Please define a `secret`. Read more at https://errors.authjs.dev#missingsecret

vercelの環境変数にAUTH_SECRETを追加済み。

ベータ版next-auth@betaが悪いのかな

BearBeeBearBee

あー、デプロイするとドメインも変わるのか。

古いのみていた・・・・

MissingSecretは解決した。

このスクラップは2025/02/03にクローズされました