Cloudflare DevelopersCD
Cloudflare Developers•2y ago
Baran

Loading different env variables with Nextjs and next-on-pages

Aim
I want to call Cloudflare env variables such as:

// ./src/server/db/auth.ts
import { createClient } from '@libsql/client';

export const runtime = 'edge';

export const client = createClient({
  url: env.TURSO_DATABASE_URL,
  authToken: env.TURSO_AUTH_TOKEN,
});


Problem
When I run npx @cloudflare/next-on-pages@1, the Vercel build fails with the following error:

./src/server/db/auth.ts:6:8
Type error: Cannot find name 'env'.

  4 |
  5 | export const client = createClient({
> 6 |   url: env.TURSO_DATABASE_URL,
    |        ^
  7 |   authToken: env.TURSO_AUTH_TOKEN,
  8 | });
  9 |


So, that makes me think that my configuration is broken.

// ./next.config.mjs
import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform({ persist: true });
}

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;


# ./wrangler.toml

name = "TBC"
compatibility_date = "2024-05-12"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[env.preview]
vars = { TURSO_DATABASE_URL = "A", TURSO_AUTH_TOKEN = "B" }


[env.production]
vars = { TURSO_DATABASE_URL = "A", TURSO_AUTH_TOKEN = "B" }


I am happy to create 
.env
 files, but I want to avoid duplicate data entry (e.g., settings the both env variable in .env.dev and wrangler.toml).
Was this page helpful?