🍿 You’re Probably Leaking Secrets in Next.js (Without Knowing)
Hey ,
Just a quick reminder: my "Black Friday" sale is here! ✨
{% if subscriber.tags contains "purchased_mfnc_course" %}
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.
My records show that you already own Developer to Leader…
You can snag40% off the Modern Full-Stack Next.js Course - a comprehensive interactive course on building and deploying 7+ Production-ready apps with modern best practices that are real-world and in-depth with Zero fluff.
The sale is live only until December 2nd and Regional Pricing will be applied on top of the Black Friday discount, use the code in the banner if you need it.
{% endif %}
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!
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:
Stop Leaking secrets
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.
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 librarylets you define custom directives the same way React uses "use client" or "use server".
TanStack Startshipped 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-purposetools 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!