Next.js vs Vite: Environment Variables and Secrets
Updated 2026-10-17
Both frameworks inline prefixed variables into client JavaScript at build time. This comparison describes common default patterns and where security responsibility sits. Platforms change quickly; verify current behaviour in each vendor's documentation.
| Area | Next.js | Vite |
|---|---|---|
| Public prefix | NEXT_PUBLIC_ | VITE_ (configurable envPrefix) |
| Server access | Route handlers, server components/actions | Needs a separate backend/functions |
| Guardrail | import "server-only" | Keep secrets out of the Vite project entirely |
| Common mistake | NEXT_PUBLIC_ on a secret | VITE_ on a secret / envPrefix: '' |
Takeaway
A Vite SPA has no server of its own, so any secret it touches is public. Next.js has a server, but only if you keep secrets on its side of the boundary.
FAQ
Can Vite apps use secrets safely?
Yes, through a backend — serverless functions, Edge Functions or an API server.
Check your deployed app in ~25 seconds
Free passive scan: leaked keys, Supabase exposure, public config files and headers.
Run a free scan