Next JS Data Fetching mistakes & Security vulnerabilities

The Data Fetching Disaster

Let’s have an honest conversation about Next.js.

I love Next.js. I really do. But it has given us so many ways to shoot ourselves in the foot when it comes to data fetching.

I’ve audited dozens of Next.js codebases. I’ve seen the same mistakes repeated over and over again. And worse, I’ve seen some terrifying security vulnerabilities that could destroy a company overnight.

This isn’t a theoretical guide. This is a collection of real scars from the trenches.

Let's talk about the mistakes you're probably making right now.

Mistake 1: The Client-Side Secret Leak

This is the big one. The one that keeps me up at night.

Next.js makes it incredibly easy to blend server and client code. That’s a feature, but it’s also a massive liability.

I once reviewed a project where a developer was fetching data from a third-party API directly inside a React component.

// Don't do this. Ever.
const fetchData = async () => {
  const res = await fetch('https://api.example.com/data', {
    headers: {
      Authorization: `Bearer ${process.env.SECRET_API_KEY}