Skyversal fully supports Next.js' environment variable model. For security reasons, Next.js separates the code running on the server from the code sent to the browser. In this guide, you will learn what the NEXT_PUBLIC_ prefix does, which variables are sent to the client, and how to securely manage environment variables on Skyversal.
Manually transferring environment variables or keeping .env files secure requires additional configuration and security responsibility on a traditional VPS. Skyversal securely stores your environment variables and safely passes them to your application during the build and runtime phases. Nixpacks uses these variables at necessary points during the build process.
1. Server-side vs Client-side Variables
Server-side Only
These variables can only be read by server-side code and are never sent to the browser.
💡 Server-side Examples
- Server Components
- Server Actions
- Route Handlers
- API Routes
- Middleware
DATABASE_URL="postgres://..."
STRIPE_SECRET_KEY="sk_live_xxxxx"
JWT_SECRET="super-secret"Exposed to the Browser
You must prefix variables with NEXT_PUBLIC_ if you want them to be accessible by the browser. Variables starting with NEXT_PUBLIC_ are not secret. They are embedded into the application's client bundle so that the browser can read them.
NEXT_PUBLIC_API_URL="https://api.example.com"
NEXT_PUBLIC_SUPABASE_URL="https://xyz.supabase.co"
NEXT_PUBLIC_ANALYTICS_ID="G-XXXXXXXX"2. Where are Environment Variables Used on Skyversal?
🏗️ Build Time
- SSG (Static Site Generation)
- Static Export
- next/image
- Bundle creation
🚀 Runtime
- Server Components
- API Routes
- Server Actions
- Cron Jobs
- Background Workers
3. Adding Environment Variables on Skyversal
To add a new environment variable to your project:
- Open your project dashboard.
- Go to the Settings → Environment Variables section.
- Enter the Key and Value.
- Save changes.
- Trigger a Re-deploy if necessary.
4. Why is a Re-deploy Required?
While server-side variables might not require a new build depending on the framework, variables starting with NEXT_PUBLIC_ are embedded into JavaScript packages (client bundle) by Next.js during the build process, therefore a new deploy is recommended.
5. Security Tips
⚠️ Warning
- ❌ DATABASE_URL
- ❌ JWT_SECRET
- ❌ STRIPE_SECRET_KEY
- ❌ OPENAI_API_KEY
- ❌ RESEND_API_KEY
Never use NEXT_PUBLIC_ for sensitive information like these. Doing so includes these variables in the client bundle, meaning they can be viewed through Browser Developer Tools or client-side JavaScript code.
Frequently Asked Questions
What happens if I don't use NEXT_PUBLIC_?
The client-side (browser) code will not be able to access the variable, and its value will be undefined.
I updated a value in production, but the app uses the old one.
Variables starting with NEXT_PUBLIC_ are embedded into the client bundle during the build. You must trigger a new Re-deploy to apply the changes.
Should I upload my .env file to GitHub?
No. Your local .env file should remain in .gitignore, while production variables must be securely managed from your Skyversal dashboard.
Everything is Ready!
You can now securely manage both server-side secrets and client-side environment variables in your Next.js application.
Next Steps
In the next guide, we will explore how Next.js Image Optimization, Middleware, ISR, and other advanced features work on Skyversal.