Next.js App Router Quirks I Keep Mixing Up

A page.tsx is marked 'use client' and imports a helper from lib/db.ts that uses process.env.DATABASE_URL. The page renders fine in dev but breaks in production with a leaked secret warning at build time. What is happening and what is the fix?

What happens

What happens: with 'use client' on page.tsx, the import of lib/db.ts gets bundled into the client JS and process.env.DATABASE_URL is replaced with the literal value at build time. The secret leaks to the browser. After the fix (drop 'use client' from the page, push interactivity into a small users-list.tsx client component and pass users as a prop), the DB call stays server-only and the client bundle has no secret.