5 months ago
hello. somehow, my nextjs app that I deployed on railway cant access environment variables in nextjs16 instrumentation-client
I even passed the keys with the .toml file but i cant acsess it.
6 Replies
5 months ago
I would highly suggest not using NEXT_PUBLIC_* variables for backend. NEXT_PUBLIC_* variables are exposed to the public internet.
I would recommend using just POSTHOG_KEY and POSTHOG_HOST instead.
POSTHOG keys are meant to be public. Their team secures them. I cant access the variable.
5 months ago
**Issue with Environment Variables in Next.js 16 on Railway often arises due to how `instrumentation.js/client` works. Here are several solutions:**
## 1. **Check Railway Configuration**
In `railway.toml`, make sure variables are passed correctly:
```toml
[build]
builder = "nixpacks"
buildCommand = "npm run build"
[variables]
NEXT_PUBLIC_API_URL = "https://api.example.com"
API_SECRET_KEY = "your-secret-key"
[deploy]
startCommand = "npm start"
```
## 2. **Use the Correct Prefix**
For Next.js 16 in `instrumentation.js/client`:
- **NEXT_PUBLIC_*** variables are only available during build time
- Regular variables (without prefix) are available during runtime as well
```javascript
// instrumentation.js or instrumentation-client.js
export async function register() {
// Correct way to access
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const secretKey = process.env.API_SECRET_KEY;
// NEXT_PUBLIC_ variables may be undefined at runtime
console.log('API_URL:', apiUrl);
console.log('SECRET_KEY:', secretKey);
}
```
## 3. **Export Variables in next.config.js**
```javascript
// next.config.js
module.exports = {
env: {
CUSTOM_INSTRUMENTATION_KEY: process.env.CUSTOM_INSTRUMENTATION_KEY,
},
// or use publicRuntimeConfig
publicRuntimeConfig: {
instrumentationKey: process.env.INSTRUMENTATION_KEY,
},
};
```
## 4. **Use Runtime Variables**
In Railway Dashboard, add environment variables:
1. Go to your Railway project
2. Settings → Variables
3. Add variables:
```
INSTRUMENTATION_KEY=your-key-here
NEXT_PUBLIC_API_URL=your-url
```
## 5. **Check Loading Order**
In `package.json`, ensure there are no conflicts:
```json
{
"scripts": {
"build": "next build",
"start": "next start"
}
}
```
## 6. **Restart the Deployment**
```bash
# Via Railway CLI
railway up
# Or via Dashboard
# Deployments → Clear Cache and Redeploy
```
## 7. **Add Explicit Env Loading**
Create a file for loading variables:
```javascript
// lib/env.js
export function getInstrumentationConfig() {
return {
key: process.env.INSTRUMENTATION_KEY ||
process.env.NEXT_PUBLIC_INSTRUMENTATION_KEY,
// other variables
};
}
```
## 8. **Check Railway Logs**
```bash
# View logs
railway logs
# Or in Dashboard: Metrics → Logs
```
## 9. **Use .env.local for Local Development**
```bash
# .env.local
INSTRUMENTATION_KEY=local-key
NEXT_PUBLIC_API_URL=http://localhost:3000
```
## 10. **Update Next.js and Dependencies**
```bash
npm install next@latest
```
## Quick Checklist:
1. Variables added in Railway Dashboard Variables
2. No `NEXT_PUBLIC_` prefix for runtime variables
3. Using `process.env.VAR_NAME` in code
4. Project restarted after adding variables
5. No variable duplication in different places
Try these solutions starting with checking variables in Railway Dashboard and restarting the deployment.