Server-Side Validation in Next.js with Zod and Server Actions

Happy to announce the release of our new open-source package: next-revalidator-js! 🚀 Next.js on-demand caching is an absolute game-changer for frontend performance, but setting up the webhooks to trigger it from your backend is tedious. It usually requires writing custom API routes, coding manual secret token validations, and dealing with repetitive error handling for every single project. My team got tired of the manual setup and actually did something about it. They built a zero-config, plug-and-play package that handles your Next.js on-demand cache revalidation instantly. Drop it in, pass your secret key, and your frontend is securely synced with your backend in under 60 seconds. Why this is a massive win for your architecture: 1. Server-Side Superpowers: You can now safely set your Next.js cache to 1 year. Your database only gets queried when data actually changes, drastically reducing server load, API costs, and database bottlenecks. 2. The User Experience: The instant your backend updates, the Next.js server cache is purged. The very next time a user loads or navigates to the page, they are served the fresh data at static-site speeds. No waiting for arbitrary cache timers to expire. 3. Zero Boilerplate: Built-in secret verification and native support for Next.js 13 through 16. A massive shoutout to Dish Khant for his incredible effort in building and open-sourcing this. He took a frustrating developer bottleneck and engineered a beautiful solution for the whole community. Brilliant work, Dish! 👏 Check out the before-and-after in the image below, and grab the package on npm to try it in your next project: 🔗 https://lnkd.in/dzQPc4H4 #Nextjs #ReactJS #WebDevelopment #OpenSource #JavaScript #DeveloperExperience #WebDev #Backend

Spent hours debugging a “simple” login issue today… turned out it wasn’t simple at all.. Everything looked fine: ✔ Backend deployed ✔ Frontend deployed ✔ Auth working But admin dashboard? Completely broken. The bug? Frontend was calling: /api/users Backend only had: /api/admin/users That’s it. One mismatch → whole feature dead. But wait… it got worse 👇 • Wrong env variable (VITE_API_URL instead of VITE_BACKEND_URL) • Old API domain still cached in production bundle • Missing route mount (/api/auth not connected in Express) So even after fixing one issue… another one popped up. Final fix: ✔ Correct API base URL ✔ Align frontend + backend routes ✔ Mount missing routes ✔ Rebuild + hard refresh Lesson learned: 👉 Bugs in production are rarely “big”..they’re tiny mismatches stacked together. This is what real full-stack debugging looks like. Live: https://www.anikdesign.in/ #webdevelopment #debugging #fullstack #nodejs #react #javascript #backend

𝗜 𝗨𝗽𝗴𝗿𝗮𝗱𝗲𝗱 𝗠𝗬 𝗣𝗼𝗿𝗧𝗳𝗼𝗹𝗶𝗼 𝗙𝗿𝗼𝗺 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟰 𝗧𝗼 𝟭𝟲 I upgraded my portfolio from Next.js 14 to 16. Here's what I learned: - Upgrading Next.js is not as scary as it seems. - It's a series of small steps. I started with Next.js 14 and upgraded to 15 first. Then I went to 16. - I updated my React dependencies. - I cleared my build cache. Next.js 16 has some big changes: - Turbopack is now the default bundler. It's faster. - React 19 support is better. - Image optimization is improved. - TypeScript integration is better. I had some issues with deprecated middleware. - I kept my middleware file intact. - I updated next-intl to the latest version. When adding new libraries, check their peer dependencies. - I added recharts for data visualization. - I had to install react-is as a peer dependency. Here's what you should do when upgrading: - Commit your current work - Document your current version - Check all test files pass - Review the official Next.js upgrade guide - Upgrade incrementally - Update React dependencies - Clear build cache - Run npm run build - Test all major routes - Check console for deprecation warnings My project's performance improved: - Dev build time is

Your React component is leaking memory and you have no idea. I just read about this pattern in the docs. I realized I was fighting the React lifecycle for months 😅 The problem? Race conditions from uncleared async requests. When you fetch data on state change: - User changes profile 10 times in 1 minute - 10 API requests fire - Only the LAST response updates state - Previous 9 complete but state is already changed - Memory leak + stale data Most devs skip cleanup. Most tutorials show incomplete examples. Result? Wasted requests, stale data, memory leaks. #React #JavaScript #Performance #WebDevelopment

Mistake #2: I treated state like a storage layer. If I needed a value, I stored it. Even when it could be calculated from existing data. At first, it felt convenient. Later, it became a mess. Now I had to keep multiple states in sync. One small change, and something else broke. The shift was simple, but powerful: State should be minimal. Everything else should be derived. If a value can be computed, don’t store it. This reduced bugs more than any library ever did for me. Follow for Day 3. Repost if you’ve maintained “too much state”. #reactjs #frontend #javascript #stateManagement #webdevelopment #cleanCode

Your Node.js API can be slow… Even if your database is fast. Here’s why 👇 Node.js runs on a single thread. So when you do: → Heavy computation → Large loops → Sync operations You block: ❌ All incoming requests Real-world impact: → Slow APIs under load → Increased latency → Poor scalability What works: ✔ Use async/non-blocking operations ✔ Offload heavy tasks (workers/queues) ✔ Keep request handlers lightweight Key insight: In Node.js: Blocking code = blocking server #NodeJS #Backend #Performance #JavaScript #SoftwareEngineering #SystemDesign #Engineering #WebDevelopment #ScalableSystems

𝗪𝗵𝗲𝗻 𝗦𝗦𝗥 𝗕𝗿𝗲𝗮𝗸𝘀: 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗥𝗲𝘁𝘂𝗿𝗻𝘀 𝗥𝗦𝗖 I found a production site built with React and Next.js. One route did not return HTML. It returned the raw React Server Component payload. The server streamed internal rendering data. It failed to send a full page. This suggests a few issues: - Config errors. - Routing bugs. - Version mismatches. This is not a direct exploit. It is information disclosure. It exposes framework internals. It signals gaps in deployment. The server and client boundary is thin in Next.js. Have you seen these leaks in production? Source: https://lnkd.in/gjc5HtdG

Unpopular opinion: End-to-end type safety with full-stack TypeScript and tRPC isn’t the magical solution. Here’s the reality in practice. Tight integration between your client and server code with TypeScript and tRPC can significantly reduce mismatched types. But there’s a catch: it’s not always straightforward to set up in larger codebases or with legacy systems. Here's a quick demo of what it looks like: ```typescript import { initTRPC } from '@trpc/server'; const t = initTRPC.create(); const appRouter = t.router({ getUser: t.procedure.input((id: string) => id) .query(({ input }) => { // Fetch user from database }), }); ``` When using tRPC, the key is to let TypeScript guide you through the integration, making sure every part of the stack speaks the same language. My experience shows that once set up, it streamlines development and reduces errors. Still, is it worth the initial complexity for your project? What’s your take on using full-stack TypeScript with tRPC? #WebDevelopment #TypeScript #Frontend #JavaScript

🚀 30 Days of JavaScript – Day 21 Today I explored how applications communicate with servers. 💡 Project: Fetching Data from API This project loads user data from an external API and displays it dynamically. 🧠 Concepts Used: i) fetch API ii) async/await iii) JSON data handling iv) DOM rendering 📌 This helped me understand how frontend applications interact with backend services. 🎥 Demo below 👇 Full source code in the First comments. #JavaScript #WebDevelopment #API #FrontendDevelopment #LearningJavaScript

🚀 Next.js (Advanced) — What Actually Matters in Production Most developers use Next.js for routing. Real value comes from understanding its architecture. ⚡ Advanced Concepts You Should Know: - Server Components → move logic to server, reduce client bundle - Caching Model → fetch caching, revalidation, request deduping - Server Actions → eliminate API layer for mutations - Streaming UI → send partial HTML using Suspense - Edge Runtime → ultra-fast middleware & personalization - Rendering Strategy → SSR vs SSG vs ISR based on data patterns 🧠 Engineering Insight: Bad performance in Next.js is usually caused by: - Overusing Client Components - Wrong caching strategy - Unnecessary API layers 🔥 Production Mindset: - Push maximum logic to server - Keep client JS minimal - Design data flow, not just UI - Think in terms of latency & caching 💡 If you understand this, you’re not “using Next.js” You’re engineering with it. #NextJS #SoftwareEngineering #WebPerformance #FullStack #JavaScript