D1 env Binging is not working in next.js project
Hi I am trying to use d1 on
/src/api/route.ts:
export const runtime = 'edge';
import { getRequestContext } from "@Cloudflare/next-on-pages";
import { NextResponse } from 'next/server';
export const GET = async () => {
//const db = getRequestContext().env.DB
const stmt = await ((getRequestContext().env.DB as any).prepare('SELECT * FROM form_fields').all())
.result;
return NextResponse.json(JSON.stringify(stmt));
};
and this is the error
./src/app/api/getform/route.ts:8:48
▲ Type error: Property 'DB' does not exist on type 'CloudflareEnv'.
▲
▲ 6 | //const db = getRequestContext().env.DB
▲ 7 | console.log(process.env.DB)
▲ > 8 | const stmt = await ((getRequestContext().env.DB as any).prepare('SELECT * FROM form_fields').all())
▲ | ^
▲ 9 | .result;
▲ 10 | console.log(stmt)
▲ 11 | return NextResponse.json(JSON.stringify(stmt));
It seem cannot read the DB type even I have already set the variable on cloudflare pages gui and do the wrangler.toml like:
name = "template"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"
compatibility_date = "2024-08-12"
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "asdfa"
database_id = "agdfa"
And I have set the env.d.ts like
declare global {
interface CloudflareEnv {
DB: D1Database
}
}
/src/api/route.ts however I have error when building it. It cannot read the DB env even I have already set up on wrangler.toml and env.d.ts /src/api/route.ts:
export const runtime = 'edge';
import { getRequestContext } from "@Cloudflare/next-on-pages";
import { NextResponse } from 'next/server';
export const GET = async () => {
//const db = getRequestContext().env.DB
const stmt = await ((getRequestContext().env.DB as any).prepare('SELECT * FROM form_fields').all())
.result;
return NextResponse.json(JSON.stringify(stmt));
};
and this is the error
./src/app/api/getform/route.ts:8:48
▲ Type error: Property 'DB' does not exist on type 'CloudflareEnv'.
▲
▲ 6 | //const db = getRequestContext().env.DB
▲ 7 | console.log(process.env.DB)
▲ > 8 | const stmt = await ((getRequestContext().env.DB as any).prepare('SELECT * FROM form_fields').all())
▲ | ^
▲ 9 | .result;
▲ 10 | console.log(stmt)
▲ 11 | return NextResponse.json(JSON.stringify(stmt));
It seem cannot read the DB type even I have already set the variable on cloudflare pages gui and do the wrangler.toml like:
name = "template"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"
compatibility_date = "2024-08-12"
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "asdfa"
database_id = "agdfa"
And I have set the env.d.ts like
declare global {
interface CloudflareEnv {
DB: D1Database
}
}
