.env · generator · Next.js

Next.js .env Generator

Next.js reads .env.local automatically — no import needed. This generator produces a complete file for the most common Next 15 stack: NextAuth for auth, Supabase for data, Stripe for payments.

.env for Next.js · 10 keys

Customize →

NEXT_PUBLIC_SITE_URL=http://localhost:3000
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=VW6-qNsqs8drl5aX7OlNlCKtogbcMSLNGUCFoJamEHT_3ZUw
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
STRIPE_SECRET_KEY=sk_test_
STRIPE_WEBHOOK_SECRET=whsec_
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_

Secrets regenerate on every page load. Want to combine stacks (e.g., Next.js + Stripe + Supabase)? Use the full generator.

How to use this .env in Next.js

1.Paste the output into .env.local in your project root.
2.Keep NEXT_PUBLIC_ prefixes — those variables are exposed to the browser.
3.Restart the dev server after adding or changing variables.
4.Add all the same keys in your Vercel (or host) project settings for production.

Gotchas

⚠Variables without NEXT_PUBLIC_ are server-only. Accessing them in a client component returns undefined.
⚠.env.local is loaded in every env except during tests. Use .env.test for test overrides.
⚠Next.js inlines NEXT_PUBLIC_ variables at build time — changing them requires a rebuild.