Ive looked for other posts about this but no one has been in the same boat as me. I have a simple app running with a database that is on Turso. Obviously this takes a url and api key for me to interact with it. I have gotten it to work before no problems, then suddenly Next.js is not even reading my environment.

Here is my .env file

TURSO_DATABASE_URL=string
TURSO_AUTH_TOKEN=string
UPSTASH_REDIS_REST_URL=string
UPSTASH_REDIS_REST_TOKEN=string

And here is where the variables are being read

import { drizzle } from "drizzle-orm/libsql"; // Tool to edit database
import { createClient } from "@libsql/client";

const turso = createClient({
    url: process.env.TURSO_DATABASE_URL!,
    authToken: process.env.TURSO_AUTH_TOKEN,
});

export const db = drizzle(turso);

So that file is in src/app and the .env file is correctly in the root. Every time I interact with my database, it uses that file to connect; so any interaction sets off an error explaining that my environment variables are undefined. I have tried putting quotes around the strings and modifying the .env file itself but I think the issue is that Next.js isn't even loading them in the first place. I have restarted my localhost like 50 times, so that isn't the issue. So, Im assuming it's an issue with Next.js but Im just not sure. Any help is appreciated.

Ive looked for other posts about this but no one has been in the same boat as me. I have a simple app running with a database that is on Turso. Obviously this takes a url and api key for me to interact with it. I have gotten it to work before no problems, then suddenly Next.js is not even reading my environment.

Here is my .env file

TURSO_DATABASE_URL=string
TURSO_AUTH_TOKEN=string
UPSTASH_REDIS_REST_URL=string
UPSTASH_REDIS_REST_TOKEN=string

And here is where the variables are being read

import { drizzle } from "drizzle-orm/libsql"; // Tool to edit database
import { createClient } from "@libsql/client";

const turso = createClient({
    url: process.env.TURSO_DATABASE_URL!,
    authToken: process.env.TURSO_AUTH_TOKEN,
});

export const db = drizzle(turso);

So that file is in src/app and the .env file is correctly in the root. Every time I interact with my database, it uses that file to connect; so any interaction sets off an error explaining that my environment variables are undefined. I have tried putting quotes around the strings and modifying the .env file itself but I think the issue is that Next.js isn't even loading them in the first place. I have restarted my localhost like 50 times, so that isn't the issue. So, Im assuming it's an issue with Next.js but Im just not sure. Any help is appreciated.

• reactjs
• next.js
• environment-variables
• environment

1 Answer 1

I have found the answer to my situation

I was not using 'use client' at the top of my function that was calling the database. I thought that Next.js automatically loads pages as server components so I assumed it didn't need the clarification. Kind of a stupid but common mistake so I hope anyone who has the same issue checks that every function they use their environment variables in should be marked 'use client'.