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,
});

// ./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 |

./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;

// ./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" }

# ./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).

1 Reply

lettucebaran•6mo ago

I think I solved it, but it would be nice to get confirmation from other devs. I created 2 .env files: - .env.development.local - .env.production.local They are loaded as needed specified in the package.json scripts. I manually added .env.production.local variables to wrangler.toml. This is the bit I am conscious about since there is data duplication. Any recommendations on solving this?

Gaming

Programming

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