🍿 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
A terminal interface displays commands for a tool called next-browser, designed for AI agents to analyze and monitor Next.js applications.

Hey Reader, This week, Next.js 16.2 gave AI agents something they never had "a browser". Your agent can now see your app, find the problem, and fix it without asking you. This along with GPT-5.4 mini & nano (2 small models), TanStack Start going 5x faster, why you should ban useEffect, and more. Let's dive in. 🍿 Our Weekly Snack: Your AI agent can finally see what your users see (Next.js 16.2 is here) Next.js 16.2 dropped yesterday (deep dive here) and it just gave AI agents a browser. It's...

next.js proxy

Hey Reader, Middleware got renamed to Proxy in Next.js 16. Same functionality. Better name. What is Proxy? Every request to your app has to go somewhere - a page, an API route, a file. Proxy gets to look at it first and decide what happens: send the user somewhere else, serve different content silently, or just let it through as-is. Think of it as a traffic controller 🚦 sitting in front of your routes. So, why you should stop putting auth in Proxy? It feels like the perfect place but it...

You’re Suspending the Wrong Component

Hey Reader, There are thousands of you going through Modern Full Stack Next.js Course so wanted to be grateful here for your support. Just as a thank you, there is something big dropping for you. It will only last 24 hours ⏰ so keep an eye out for my email next week. Let's dive in! PRESENTED BY CLERK Instead of your coding agent guessing how auth works, you can now install specialized Clerk knowledge directly into it. Introducing Clerk Skills One simple command $ npx skills add clerk/skills...