🍿 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
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...

Next.js bundle analyzer

Hey Reader, This week, we're putting your Next.js app under the microscope, what's slowing it down? This along with the latest news, can AI really debug complex React/Next.js bugs? How OpenClaw and Anthropic are enabling AI collaboration, 3 New Coding Models dropped and more. Let's dive in! 🍿 Our Weekly Snack: What's Really Slowing Down Your Next.js App? Have you ever wondered why your Next.js app feels sluggish or takes forever to load? 🐌 The new experimental Bundle Analyzer in Next.js 16.1...

git worktree

Hey Reader, A lot of you have been asking me how I’m able to stay so productive and get a lot of work done so I finally broke down my exact workflow and setup in a short video. 🍿 Our Weekly Snack: Run Multi Agents stress free with Claude Code Git work trees let you check out multiple branches at the same time each in its own folder all backed by the same repo. Instead of one working directory and constant branch switching, you get parallel workspaces. Each work tree has its own isolated...