🍿 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
Next.js 16 Cheatsheet

Hey Reader, Last week I told you I was about to drop something big… Well, today’s the day. 🎉 I’ve been building something to finally clear the fog around Next.js 16 - all the new caching rules, data-fetching patterns, rendering behaviors, and how Server Components actually work in real apps. Introducing your Next.js 16 Cheatsheet + Free 3-Part Mini-Course 💫 👉 Click here to get it (free) The moment you download it, you’ll unlock a short email course that starts tomorrow. It’s designed to help...

use cache:remote

Hey Reader, I’ve been heads-down the last few months, building something special 🤫. It’s for every developer who’s ever felt like Next.js changes faster than they can keep up. Different caching rules. New folders. New ways to fetch data. If that sounds familiar… this one’s for you. Next week, I’m dropping something big, something that’ll help you finally understand how all the new pieces in Next.js 16 fit together. No hype, no fluff - just the clarity you’ve been looking for. Make sure you...

use cache:remote

Hey Reader, I had the incredible opportunity to speak at the official Next.js Conf!. It’s been 2.5 years since I went full-time as a Tech Educator, and this moment truly feels like a milestone. In my talk, I share how I built a custom course platform using Next.js (the same one that powers Modern Full Stack Next.js Course) along with the lessons and challenges I faced along the way. If you'd like, you can watch the talk here! Weekly Snack: Caching Patterns for Dynamic Components in Next.js 🍿...