🍿 You’re Probably Leaking Secrets in Next.js (Without Knowing)


Hey Reader,

Just a quick reminder: my "Black Friday" sale is here! ✨

My records show that you already own the Modern Full-Stack Next.js Course…

You can snag ~40% off Developer to Leader, the course that helps Engineers step into Engineering Leadership with confidence. And honestly? In an AI-driven world, the people who lead, not just build are the ones who stand out.

Regional Pricing will be applied on top of the Black Friday discount, use the code in the banner if you need it.

Also, if you have any questions at all, hit reply and ask away, and I'll get back to you as quickly as I can!

🍿 Weekly Snack: Avoid Accidentally Exposing Environment Variables

If you’re using Next.js, you’re probably storing API keys, Database URLs, and other secrets in environment variables.

Here’s the gotcha:

Anything that starts with NEXT_PUBLIC_ is exposed to the browser.

That means if you do this:

…it’s no longer a secret. Your users can see it in the client bundle / dev tools. 😅

So what do we do then:

“Our client needs that env variable to make an API call”?

✅ The fix: Use a Parent–Child pattern (Server → Client)

Instead of giving the client the secret, move the sensitive logic to a Server Component, do the work there, and pass only the result to the Client Component.

Here's how:

Why this pattern is so powerful

  • Your API keys never leave the server
  • The client gets exactly what it needs: data, not credentials
  • You can still use all your interactive UI with "use client"
  • Works beautifully with RSC + App Router
  • You ship a smaller bundle too!

Rule of thumb:

If it starts with NEXT_PUBLIC_, assume the whole world can see it.
If it’s sensitive, keep it in a Server Component and pass data down instead.

🚀 Latest Frontend News

​Modern Form Builder for ShadCN components, If you use shadcn/ui, this one is very cool, a production-ready form builder designed specifically for ShadCN components.

💟 Free Next.js 16 Cheatsheet, simply click here and get the cheatsheet + 3-part short course on Next.js 16.

​Open Source Workflow Builder (WorkflowDevKit) for building workflow automation platforms. If you've ever thought “I wish users could create automations around my product,” this is a gem.

🧭 Create Your Own Directives (like “use client”) This library lets you define custom directives the same way React uses "use client" or "use server".

​2 Years of TanStack Ecosystem, Tanner Linsley (Creator of TanStack) shares his journey.

TanStack Start shipped a Quick Start Guide - it is the fastest way to get a Start project up and running (think create-react-app or create-next-app but for TanSTack)

🆕 Astro 5.16 Released, it continues to quietly ship some of the best DX improvements in the ecosystem. It includes

  • Experimental SVG optimization
  • Interactive CLI improvements
  • Lots of DX polish

If you use Astro for content sites or docs, this release is worth the update.

Grid.js, Open Source Data table - A lightweight, framework-agnostic data table. If you’re tired of heavy table libs, this is refreshingly simple, check here​

🧰 Tiny Helpers: A delightful collection of free, single-purpose tools for web developers. Everything from regex testers to color contrast checkers to JSON prettifiers.

⚡ Upgrade to the Latest Next.js Version Quickly: Next.js now has a built-in upgrade command. It scans your project, applies recommended changes, and helps you move to the latest stable safely.

My Black Friday sale ends on December 2nd so grab it while you can!


​
All past newsletters
can be found here.

You can email me at me@kulkarniankita.com to advertise/sponsor the newsletter.

For those curious, I write all my emails using Convertkit.

Ankita Kulkarni

Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!

Read more from Ankita Kulkarni
cut ai bill in half

Hey Reader, I checked my Claude usage last week and found out I’d been paying max-effort prices to rename variables. Three small changes later, my bill is half what it was. This week: the 3 fixes that saved me the most, a Next.js patch you need today, and Opus 5.5 making motion graphics by writing code. One small favour first: I’m building my AI course and need your help. It will only take 60 seconds. → Click here for feedback PRESENTED BY SONARQUBE We all hate security scanners that flood...

Hey Reader, I've been heads down focusing on crafting my AI course. I'm still in early stages and need your help. Can you fill this quick survey that should take less than a minute and give me your feedback? → Click here for feedback PRESENTED BY SONARQUBE We all hate security scanners that flood our PRs with false positives. It's the quickest way to get a dev to ignore alerts altogether. SonarQube Hunter Agent is different. It’s an AI-powered agent that hunts for business logic flaws and...

Hey Reader, The biggest challenge with AI right now isn't building from scratch or brainstorming, it's great at both. It's building real intuition for how things should work. Take how TikTok and YouTube handle video. If they served the same file to every device, tablet, mobile, desktop, even a slow 3G connection, users would drop off fast. So how would you solve that? Don't worry, let me show you. Here's how to architect for exactly this challenge. PRESENTED BY IMAGEKIT Don't throw raw MP4s...