Fix Improper Assets Management in Next.js

Improper Assets Management in Next.js typically manifests as sensitive files being dumped into the '/public' directory or secrets being leaked into client-side bundles via the 'NEXT_PUBLIC_' prefix. If an asset is in '/public', it is served statically at the root without authentication. Attackers use automated scanners to find '.env' backups, internal PDF docs, or 'config.json' files that developers accidentally leave in the web root.

The Vulnerable Pattern

// File: /public/admin-config.json
{
  "internal_api_key": "sk_live_51Mpq...",
  "debug_mode": true
}
// File: .env.local
NEXT_PUBLIC_DB_PASSWORD=admin123 // This is now visible in the browser console/network tab

The Secure Implementation

To fix asset leakage, strictly enforce a 'Server-Side by Default' policy. Next.js maps the '/public' folder to the URL root ('/'); anything inside is accessible to the world. Never store configuration files, credentials, or documentation there. For environment variables, only use the 'NEXT_PUBLIC_' prefix for non-sensitive values like analytics IDs. For sensitive files that must be processed, store them outside the 'public' directory and access them via 'fs' in 'getStaticProps' or API routes, ensuring they never reach the client-side build artifact.

// 1. Move sensitive assets to a non-public directory, e.g., /assets/internal/
// 2. Use server-only environment variables
// File: .env.local
DB_PASSWORD=admin123 // No NEXT_PUBLIC_ prefix
// File: src/lib/db.js
// This code only runs on the server
export const connectDB = () => {
const pass = process.env.DB_PASSWORD;
// … logic
};
// File: .gitignore
.env*
public/backups/
*.map