ご無沙汰しております。
ただいまNext.jsを公式チュートリアルで学習しているのですが、Chapter7の「Fetching Data」で大きく詰まってしまったため、その時の対処を記事として起こしました。
発生したエラー①
チュートリアルでは「Neon」でのセットアップを取り扱っていたのですが、Neonは別の用途で用いる予定がありましたので、「Supabase」の方を使用することにしました。
Supabase自体のセットアップは滞りなくでき、その後もチュートリアルに沿って.envファイルの設定とコーディングは進められ、テストデータの挿入も問題なくできたのですが、localhostで動作確認を行ったところ、下図のエラーが発生しました。
page.tsxの中身を確認しましたが、タイポなどが見当たらなかったのでログを確認すると、404のエラーが出ておりました。
エラーログ
Database Error: NeonDbError: Server error (HTTP status 404): Not Found
at execute (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1554:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchRevenue (webpack-internal:///(rsc)/./app/lib/data.ts:22:22)
at async Page (webpack-internal:///(rsc)/./app/dashboard/page.tsx:17:21) {
code: null,
sourceError: undefined
}
⨯ app\lib\data.ts (27:11) @ fetchRevenue
⨯ Error: Failed to fetch revenue data.
at fetchRevenue (./app/lib/data.ts:27:15)
at async Page (./app/dashboard/page.tsx:17:21)
digest: "507392606"
25 | } catch (error) {
26 | console.error('Database Error:', error);
> 27 | throw new Error('Failed to fetch revenue data.');
| ^
28 | }
29 | }
30 |
GET /dashboard 500 in 5939ms
import { createClient } from '@/utils/supabase/server';
export default async function Instruments() {
const supabase = await createClient();
const { data: instruments } = await supabase.from("instruments").select();
return <pre>{JSON.stringify(instruments, null, 2)}</pre>
}
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return cookieStore.getAll()
},
setAll(cookiesToSet) {
try {
cookiesToSet.forEach(({ name, value, options }) =>
cookieStore.set(name, value, options)
)
} catch {
// The `setAll` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
)
}
原因と対処①
上記のログを元に調べたところ、どうやらNext.jsにおけるDB接続はデフォルトだとNeonでの接続を想定したつくりになっているらしく、Supabaseでの接続は確立されていないみたいでした。
チュートリアルでNeonを例に挙げていたのは、最も設定の手間がかからないからだと思います。
data.tsのDBとの接続部分を以下に書き換えたところ、挿入したテストデータが画面に表示されました。
data.ts
- import { sql } from '@vercel/postgres';
+ import { db } from '@vercel/postgres';
import {
CustomerField,
CustomersTableType,
InvoiceForm,
InvoicesTable,
LatestInvoiceRaw,
Revenue,
} from './definitions';
import { formatCurrency } from './utils';
export async function fetchRevenue() {
try {
// Artificially delay a response for demo purposes.
// Don't do this in production :)
console.log('Fetching revenue data...');
await new Promise((resolve) => setTimeout(resolve, 3000));
- const data = await sql<Revenue>`SELECT * FROM revenue`;
+ const client = await db.connect();
+ const data = await client.sql<Revenue>`SELECT * FROM revenue`;
console.log('Data fetch completed after 3 seconds.');
return data.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch revenue data.');
}
}
発生したエラー②
localhostで画面表示ができたのでリポジトリにプッシュしVercelへデプロイしたところ、下図のエラーが発生しました。
ビルドエラーとのことなのでログを確認したところ、「nodeのモジュールで足りないものがある」ことと「接続が確立していない」だと読み取りました。
モジュール不足
[01:31:52.212] > Build error occurred
[01:31:52.214] Error: Failed to collect page data for /seed
[01:31:52.214] at /vercel/path0/node_modules/.pnpm/next@15.0.0-canary.56_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b24_4ff65fda31da0994155383043ac8ca67/node_modules/next/dist/build/utils.js:1272:15
[01:31:52.215] at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
[01:31:52.215] type: 'Error'
[01:31:52.215] }
[01:31:52.247] ELIFECYCLE Command failed with exit code 1.
[01:31:52.265] Error: Command "pnpm run build" exited with 1
[01:31:52.587]
接続エラー
Error: Connection terminated unexpectedly
at un.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1258:44)
at Object.onceWrapper (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:422:39)
at un.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at x.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1210:66)
at x.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at WebSocket.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:998:51)
at callListener (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:290:14)
at WebSocket.onClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:220:9)
at WebSocket.emit (node:events:518:28)
at WebSocket.emitClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:260:10)
at TLSSocket.socketOnClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:1272:15)
at TLSSocket.emit (node:events:530:35)
at node:net:337:12
at TCP.done (node:_tls_wrap:657:7)
at TCP.callbackTrampoline (node:internal/async_hooks:130:17)
⨯ node_modules\.pnpm\@neondatabase+serverless@0.7.2\node_modules\@neondatabase\serverless\index.mjs (1244:1) @ un.eval
⨯ uncaughtException: Error: Connection terminated unexpectedly
at un.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1258:44)
at Object.onceWrapper (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:422:39)
at un.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at x.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1210:66)
at x.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at WebSocket.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:998:51)
at callListener (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:290:14)
at WebSocket.onClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:220:9)
at WebSocket.emit (node:events:518:28)
at WebSocket.emitClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:260:10)
at TLSSocket.socketOnClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:1272:15)
at TLSSocket.emit (node:events:530:35)
at node:net:337:12
at TCP.done (node:_tls_wrap:657:7)
at TCP.callbackTrampoline (node:internal/async_hooks:130:17)
1242 | t.ssl?n.requestSsl():n.startup(t.getStartupConf())}),n.on("sslconnect",function(){
1243 | n.startup(t.getStartupConf())}),this._attachListeners(n),n.once("end",()=>{let i=this.
> 1244 | _ending?new Error("Connection terminated"):new Error("Connection terminated unex\
| ^
1245 | pectedly");clearTimeout(this.connectionTimeoutHandle),this._errorAllQueries(i),this.
1246 | _ending||(this._connecting&&!this._connectionError?this._connectionCallback?this.
1247 | _connectionCallback(i):this._handleErrorEvent(i):this._connectionError||this._handleErrorEvent(
⨯ node_modules\.pnpm\@neondatabase+serverless@0.7.2\node_modules\@neondatabase\serverless\index.mjs (1244:1) @ un.eval
⨯ uncaughtException: Error: Connection terminated unexpectedly
at un.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1258:44)
at Object.onceWrapper (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:422:39)
at un.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at x.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:1210:66)
at x.emit (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:409:63)
at WebSocket.eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@neondatabase+serverless@0.7.2/node_modules/@neondatabase/serverless/index.mjs:998:51)
at callListener (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:290:14)
at WebSocket.onClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/event-target.js:220:9)
at WebSocket.emit (node:events:518:28)
at WebSocket.emitClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:260:10)
at TLSSocket.socketOnClose (webpack-internal:///(rsc)/./node_modules/.pnpm/ws@8.14.2_bufferutil@4.0.8_utf-8-validate@6.0.3/node_modules/ws/lib/websocket.js:1272:15)
at TLSSocket.emit (node:events:530:35)
at node:net:337:12
at TCP.done (node:_tls_wrap:657:7)
at TCP.callbackTrampoline (node:internal/async_hooks:130:17)
1242 | t.ssl?n.requestSsl():n.startup(t.getStartupConf())}),n.on("sslconnect",function(){
1243 | n.startup(t.getStartupConf())}),this._attachListeners(n),n.once("end",()=>{let i=this.
> 1244 | _ending?new Error("Connection terminated"):new Error("Connection terminated unex\
| ^
1245 | pectedly");clearTimeout(this.connectionTimeoutHandle),this._errorAllQueries(i),this.
1246 | _ending||(this._connecting&&!this._connectionError?this._connectionCallback?this.
1247 | _connectionCallback(i):this._handleErrorEvent(i):this._connectionError||this._handleErrorEvent(
原因と対処②
接続エラーなので.envファイルにセットした値とSupabaseの値が合致しているか確認し調査したところ、Supabase側でも環境変数を設定しなければならないことが分かりました。
そこで、以下の方法でSupabase側に環境変数を設定いたしました。
設定値の確認
Supabaseのプロジェクトダッシュボードから Project Settings > Data API を開く。
Data APIの中の「Project URL」の「URL」と「Project API Keys」の「anon pubilic」の値をそれぞれメモ帳などに控えます。
又、この設定値はChapter6にて.envファイルに設定したものと同じ(NEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_API_KEY)であるため、こちらも合わせて確認しましょう。
Environment Variablesへの設定
Vercelのプロジェクトダッシュボードから Settings > Environment Variables を押下する。
「Create new」欄に名前と値をそれぞれセットします。
「NAME」には.envファイルで設定した名称を、「Value」には上述で控えた値をそれぞれセットします。
セットしましたら右下の「Save」ボタンを押下し、「Redeploy」を押下して再度デプロイし直します。
再デプロイが成功し、エラーが解消されました。
まとめ
非常に長時間かけて苦戦してしまいましたが、何とかNext.jsとSupabaseの連携ができました。
「チュートリアルで扱っているものは例題でも素直に従う」
「チュートリアルで出していることはちゃんと理由がある」
基本中の基本を怠ってしまったことの戒めとして、筆を執らせていただきました。
しかし、「Supabaseというものがある」「Next.jsではデフォルトだとNeonというサービスと連携できるようになっている」ことを学びました。
引き続きチュートリアルを進め、理解を深めて参ります。
参考文献
Next.js のビルド時に Error: Cannot find module '/vercel/path0/node_modules/.pnpm/bcrypt エラーが出たときの対処法
Next.jsチュートリアル
Next.js ✖️ SupabaseプロジェクトのVercelへのデプロイメモ