Fix Security Misconfiguration in Next.js

Next.js abstracts much of the boilerplate, but developers frequently fail at the client-server boundary. The most common critical misconfiguration is the 'Leaky Secret'—improperly using the NEXT_PUBLIC_ prefix for environment variables. If a secret is prefixed for the client, it's no longer a secret; it's public reconnaissance data for any script kiddie with a browser console.

The Vulnerable Pattern

// .env.local
NEXT_PUBLIC_STRIPE_SECRET_KEY="sk_live_51M..."
NEXT_PUBLIC_INTERNAL_API_URL="https://internal-admin.prod.local"
// components/Payment.js
// DANGER: This secret key is now bundled into the client-side JS
const stripe = require(‘stripe’)(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

The Secure Implementation

The NEXT_PUBLIC_ prefix tells the Next.js compiler to inline the value into the browser's JavaScript bundle. To fix this misconfiguration: 1. Remove the NEXT_PUBLIC_ prefix from all sensitive credentials (API keys, DB URIs, internal endpoints). 2. Access these variables only in Node.js environments such as API Routes, getServerSideProps, or getStaticProps. 3. Implement a strict Content Security Policy (CSP) in next.config.js using the 'headers' key to mitigate XSS and unauthorized data exfiltration. 4. Use the 'process.env' object carefully to ensure server-only logic is never imported into client components.

// .env.local
STRIPE_SECRET_KEY="sk_live_51M..."
// pages/api/checkout.js
// Secure: This code runs ONLY on the server. The variable is not exposed to the browser.
import Stripe from ‘stripe’;
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
export default async function handler(req, res) {
const session = await stripe.checkout.sessions.create({ … });
res.status(200).json({ id: session.id });
}