标签：#nextjs

Website performance is no longer just a nice-to-have feature—it's a critical factor for user experience, SEO, and business success. Even a one-second delay in page load time can reduce conversions and increase bounce rates. Whether you're building a portfolio, SaaS application, eCommerce platform, or business website, these optimization techniques can make a significant difference. Optimize Images Images are often the largest assets on a webpage. Use modern formats like AVIF or WebP, compress images, and serve responsive image sizes to reduce bandwidth usage. Self-Host Fonts Third-party font requests add latency. Self-hosting fonts, preloading critical font files, and serving only the required character subsets can dramatically improve loading performance. Remove Unused CSS & JavaScript Shipping unnecessary code increases download size and execution time. Tree shaking, code splitting, and removing unused styles help keep your bundle lean. Enable Caching Configure long-term browser caching for static assets and use hashed filenames for cache busting. This allows returning visitors to load your website much faster. Use Lazy Loading Images, videos, and iframes that aren't immediately visible should load only when needed. Native lazy loading is supported by modern browsers and is easy to implement. Optimize Core Web Vitals Google's Core Web Vitals measure how users experience your website. Focus on: Largest Contentful Paint (LCP) Interaction to Next Paint (INP) Cumulative Layout Shift (CLS) Improving these metrics benefits both SEO and user satisfaction. Minify Assets Minify HTML, CSS, and JavaScript files before deployment. Smaller files transfer faster and improve overall performance. Use a CDN Serving assets from edge locations around the world reduces latency and improves loading times for global visitors. Prioritize Accessibility Accessible websites provide a better experience for everyone and often align with SEO best practices. Use semantic HTML, descriptive labe

Week 16 shipped the AI background remover: Rust-native, ort + ISNet + libvips, no Python. That was the feature. Week 17 was not about writing more of it. It was about the boring, high-leverage part that most side projects skip: turning one working feature into pages that can actually rank, and wiring those pages together so search engines can find them. No new engine code this week. Just leverage on what already existed. Here is what that actually looked like. The problem: a hub with nothing pointing at it The background remover lives at /remove-background . That is the hub. The plan was classic hub-and-spoke: one general tool page, then use-case spokes that each target a specific intent (removing a signature background, prepping an Amazon product photo, and so on). I built two spokes this week. But halfway through, I looked at how internal links actually worked on the site and found the real problem: nothing linked from the hub to the spokes. The spokes linked back to the hub in their body text, but the hub had no idea they existed. Neither did the ~180 converter pages. Tool links on the site were hardcoded in a frontend constant, roughly: export const IMAGE_TOOLS = [ { label : " Compress JPG " , href : " /compress/jpg " , tool : " compress " }, { label : " Resize Image " , href : " /resize-image " , tool : " resize " }, { label : " Crop Image " , href : " /crop-image " , tool : " crop " }, { label : " Images to PDF " , href : " /images-to-pdf " , tool : " convert " }, ] as const ; That list covered the converter tools. It did not include the background remover or its spokes at all. So the new pages were orphans: reachable only through the sitemap, with no internal links carrying any signal to them. For a domain that is still young and still earning Google's trust, orphan pages get discovered slowly and rank even slower. The fix: one constant as the source of truth Instead of hardcoding links in three different places, I made a single constant describe the whole cl

If you've ever received a .pages or .numbers file on a Windows PC, you know the pain — you can't open it. No preview, no converter built in, and Apple's iCloud web tools are slow and clunky. So I built iworkviewer.com — a free, browser-based iWork file viewer and converter. No signup, no upload to any server. Everything happens in your browser. What it does Open .pages files → view them instantly, export to PDF or .docx Open .numbers files → view spreadsheets, export to .xlsx or PDF Open .keynote files → view presentations, export to PDF or .pptx Batch convert multiple iWork files at once The tech Built with Next.js, Cloudflare Pages, and pure client-side JavaScript. All file processing happens in the browser — your files never leave your computer. Zero server costs, zero privacy concerns. Why I built it I kept seeing Reddit threads and Quora questions: "How do I open a Pages file on Windows?" The answers were always the same — use iCloud.com (slow), download some sketchy converter (risky), or ask the sender to export as PDF first (annoying). I figured: if the browser can read a file, it can convert it. And it turns out, it can. Try it 👉 iworkviewer.com Open a .pages, .numbers, or .keynote file right in your browser. Free, forever, no account needed.

My dashboard had a useMemo doing arithmetic it had no business doing. It was a Pokémon TCG Pocket collection tracker, but that part doesn't matter. What matters is that the home page needed to show three things: overall completion, completion per set, and which set you were closest to finishing. The way I'd built it, the browser was fetching every card and every owned record, then grinding through the math on each render to figure all of that out. It worked. It also got slower and harder to read every time the data grew or I added a metric. So I moved the aggregation out of React and into Postgres, and the surprising result was that my frontend got boring . Fewer hooks, less state, almost nothing left to break. That's the whole argument of this post: aggregation belongs in the database, and when you put it there, the React code that's left over is the kind of boring you actually want in the layer your users touch. What "fetching everything into React" actually looks like Here's the shape of the original dashboard. Load all the cards, load the user's owned rows, then derive everything on the client. const [ cards , setCards ] = useState < Card [] > ([]); const [ owned , setOwned ] = useState < OwnedCard [] > ([]); useEffect (() => { ( async () => { const { data : allCards } = await supabase . from ( " cards " ). select ( " * " ); const { data : ownedRows } = await supabase . from ( " user_cards " ) . select ( " card_id " ); setCards ( allCards ?? []); setOwned ( ownedRows ?? []); })(); }, []); const ownedIds = useMemo (() => new Set ( owned . map (( o ) => o . card_id )), [ owned ]); const perSet = useMemo (() => { const groups : Record < string , { total : number ; have : number } > = {}; for ( const card of cards ) { const g = ( groups [ card . set_id ] ??= { total : 0 , have : 0 }); g . total += 1 ; if ( ownedIds . has ( card . id )) g . have += 1 ; } return groups ; }, [ cards , ownedIds ]); const overall = useMemo (() => { const total = cards . length ; const ha

i did something dumb last month. on purpose. i sat down, opened a next.js app, and tried to make hydration fail in every way i could think of. not because a bug forced me to. not because i was debugging something. just because i wanted to see it. understand it from the inside. and honestly? best few hours i've spent learning anything in a while. why i even did this you know how you use something for months and you think you get it, but you don't really get it? hydration was that for me. i knew the surface-level thing: server renders HTML, client takes over, they gotta match. cool. got it. moving on. except i didn't get it. i just got the vibe of it. every time i saw hydration mismatch, i'd ask claude, fix the immediate thing, feel vaguely annoyed, and move on. i never stopped to ask why that specific thing broke it. i was treating symptoms, not understanding the actual disease. so i decided to break it deliberately. if i caused the errors myself, i'd actually have to understand what i was doing. the setup basic next.js app. app router. a few pages. nothing fancy. i wasn't trying to build anything. i was trying to destroy something, carefully, so i could see what fell apart and why. break #1: the obvious one - new Date() on render this is the classic. everyone's seen it. export default function Page () { return < div > { new Date (). toLocaleString () } </ div > } server renders this at, say, 14:00:00. by the time react runs on the client and tries to reconcile, it's 14:00:01. the strings don't match. react screams. thing is, i knew this would happen. what i didn't think about was why react cares. here's the thing: react isn't doing a full diff on the entire DOM after hydration. it's trusting that the server HTML is a valid starting point and it's just attaching event listeners and state to it. but if the content doesn't match, it doesn't know what to trust. it can't partially hydrate "mostly correct" HTML. it either matches or it doesn't. so it throws the warning, a

The three-layer model works. Part 1 of this series is the invoice incident that proved it. Part 2 is...

This blog post is created for the purposes of entering the Hack the Zero Stack with Vercel v0 and AWS Databases hackathon. #H0Hackathon Building Innward: A B2B Hospitality Operating System with Vercel and Amazon Aurora The hospitality industry is notorious for relying on "legacy" software—clunky, slow, and disconnected. For the Hack the Zero Stack hackathon, I set out to build Innward , a modern, AI-ready Property Management System (PMS) that proves you can build enterprise-grade B2B tools in record time using Vercel v0 and AWS Databases. The Vision: Moving Beyond the Spreadsheet Hotel managers don't just need a place to store "Room 101: Occupied." They need to solve the "Hidden Math" of revenue management. This means: Relational Complexity: Linking dates, room groups, and individual stays. Dynamic Pricing: Deriving rates based on occupancy and logic-based rules. Market Intelligence: Real-time benchmarking against competitors. The "Zero Stack": Vercel + Amazon Aurora To handle this complexity, I chose Amazon Aurora PostgreSQL (Serverless v2) . Why Aurora for B2B? In a B2B SaaS environment, data isolation and relational integrity are non-negotiable. Aurora provided the robust relational power needed to join complex pricing tables while scaling automatically as more hotels (tenants) join the platform. The Zero-Secret Architecture One of the most rewarding parts of this build was implementing the AWS RDS Signer . Following the "Zero Stack" philosophy, I moved away from static database passwords. Innward uses IAM-based authentication to communicate between Vercel and AWS. By utilizing the @aws-sdk/rds-signer , the application generates short-lived tokens on the fly. This means even if an environment variable were leaked, the database remains locked tight. // lib/db.ts snippet const signer = new Signer ({ credentials : awsCredentialsProvider ({ roleArn : process . env . AWS_ROLE_ARN ! , clientConfig : { region : process . env . AWS_REGION }, }), region : process . env .

Every Sanity marketing site ends up with a page builder. An array of sections, an insert menu, a render loop that maps block._type to a component. You've built it. I've built it. We've all built the same thing. And every one of them ships with the same bug. You add a new section. You wire it into the schema. You add a renderer. You add a component. You add the type. And then — because there are five places to touch and you're a human — you forget one. The section renders blank in production. Or it never shows up in the insert menu. Or it fetches no fields because you missed the GROQ projection, so it renders as nothing at all. No error. No red. Just a hole on the page where a section should be. The annoying part isn't the bug. It's that you'll hit it again on the next project, in exactly the same way, because you rewrote the whole thing from scratch — again. The section tax Here's what "add a section" actually costs in a typical Sanity + Next.js page builder: Schema — a new *Section object type, registered in your schema index. GROQ — a new conditional in the page-builder projection so the block's fields actually come down. Component — the React component that renders it. Renderer map — an entry mapping _type → component. Types — the block variant in whatever union your frontend renders. Miss #2 and the block arrives empty. Miss #4 and it silently skips. Miss #5 and TypeScript shrugs because your union is hand-maintained and now lies. Three different failure modes, all of them quiet, all of them "works on my machine until it doesn't." Now look at those five places and ask: which of them is actually unique to your site? The component is. It's welded to your design system — your spacing, your tokens, your brand. Nobody can reuse it and nobody should. The other four are plumbing . "Look up _type in a map, call the renderer, keep the map in sync with the schema and the query." That code is byte-for-byte the same idea on every project you've ever built. So why is it livi

Today, we’re excited to launch UIAble v1.0, an open-source component library built for developers, by developers. We explored a lot of UI libraries built on Shadcn. Most of them feel nearly identical — same structure, same aesthetic, same tradeoffs. That’s what pushed us to build something different. Not another library that looks like Shadcn with a coat of paint, but a design system with its own identity and a clearer sense of what it’s actually for. Why UIAble exists After enough frontend projects, one thing becomes obvious: the same UI patterns get rebuilt again and again. Inputs. Dialogs. Tables. Alerts. Dropdowns. OTP fields. Form validation states. Not because they’re hard to build, but because most existing libraries never quite fit real project requirements. Some are too opinionated. Some pile on unnecessary abstraction. Some become rigid after initial setup. And some make simple UI unnecessarily complicated. That friction is what led to UIAble. Not to launch another oversized library, just to build a cleaner, more practical foundation for modern frontend development. What UIAble actually is UIAble is a free, open-source UI component library built with Tailwind CSS , Shadcn-style architecture , and Base UI principles . The idea is straightforward: reusable components should stay flexible, readable, and easy to maintain. Instead of pulling projects into a rigid ecosystem, UIAble gives you components you can copy directly into your codebase, edit freely, and scale without fighting the library. No lock-in. No unnecessary abstraction. No dependency trap. What makes it different in practice A few things actually matter here. You get the code. UIAble doesn’t hide logic behind layers of packaging. You see the component. You edit it. You ship it. That alone changes how teams work with UI. It’s built for real product UI, not showcase pages. A lot of UI kits look great in demos and fall apart in production. UIAble focuses on the unglamorous stuff, forms that don’t bre

Living in the UAE means constantly Googling numbers: what is the visa fee now, how much zakat do I owe, what is today's fuel price, how is my gratuity calculated. The answers online are usually outdated. So I built Adad , a free set of 15 calculators that pull from official UAE government sources and refresh every 24 hours. No sign-up, works in 8 languages. A few that people use most: Visa fees: real GDRFA and ICA rates Zakat: gold, silver, savings DEWA bills: estimate before the bill lands Gratuity: UAE labour-law end-of-service It is at adad.ae if it is useful to you. Happy to answer how the data pipeline stays current.

Vercel m'a longtemps convenu. Tu pousses ton code, trente secondes plus tard c'est en ligne avec un certificat valide, un CDN et des previews par branche. Pour démarrer un projet, je ne connais rien de plus confortable. Le problème arrive après, quand le projet vit. La facture grimpe avec le trafic et les fonctions serverless, certaines fonctionnalités propriétaires deviennent compliquées à reproduire ailleurs, et tu finis par ne plus vraiment savoir où ni comment ton app tourne. C'est un excellent point de départ, et un piège dès qu'on veut maîtriser son coût et son infra. Pour ce portfolio comme pour plusieurs projets clients, j'ai pris le chemin inverse. Un VPS à quelques euros par mois, une image Docker, un reverse proxy, un pipeline maison. L'idée n'est pas de revenir à l'âge de pierre du déploiement par FTP : je garde le « git push et c'est en ligne », mais sur une machine que je contrôle de bout en bout. Voici comment c'est câblé, et les deux ou trois endroits où je me suis fait avoir. L'image Docker : tout repose sur le mode standalone La pièce qui change tout, c'est output: "standalone" dans next.config.ts . Au build, Next trace exactement les fichiers nécessaires au runtime et les recopie dans .next/standalone/ . On passe d'une image d'environ 1 Go à environ 200 Mo. Sans ça, tu traînes tout node_modules dans ton conteneur de prod pour rien. Le Dockerfile est multi-stage : une étape pour installer les dépendances, une pour builder, une dernière qui ne garde que le strict nécessaire. # deps : installe les dépendances (cache Docker optimal) FROM node:22-alpine AS deps WORKDIR /app COPY package.json yarn.lock .yarnrc.yml ./ RUN corepack enable && yarn install --immutable # builder : build l'app FROM node:22-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN corepack enable && yarn build # runner : image finale, non-root FROM node:22-alpine AS runner WORKDIR /app ENV NODE_ENV=production RUN addgroup -g 1001 nodejs && a

I've been thinking about this problem for a while. Developers and businesses need quality websites fast — but the options are either overpriced custom builds, outdated templates, or starting from scratch every single time. So I decided to build the solution myself. Softchic is a premium template and ready-made website marketplace — production-ready, built on modern stacks, designed to actually look good. This is Week 1 of building it in public. Why Softchic The market exists. Developers need templates. Businesses need websites. But most template stores are either bloated, outdated, or built on stacks nobody wants to touch in 2026. Softchic is different — every template ships with: Modern stack (Next.js, TypeScript, Tailwind CSS v4) Clean, production-ready code Premium design out of the box The name went through 25+ candidates across multiple languages before landing here. Clean, available, memorable — Softchic. The Stack Framework: Next.js 14 (App Router) Language: TypeScript Styling: Tailwind CSS v4 Components: shadcn/ui Payments: Lemon Squeezy (international) + Paystack (Nigeria) Email: Resend Deployment: Vercel Design language: dark and premium — #0D0D0D background, #2563EB blue, #F97316 orange accents. Week 1 — What Got Built ✅ Waitlist page — designed and ready to deploy ✅ Navbar — responsive, dark-themed ✅ WaitlistForm — wired to Resend for email capture ✅ Brand system — colors, typography, full design identity locked ✅ Payment architecture — Lemon Squeezy + IP-based currency detection via ipapi.co with PPP pricing for global fairness The waitlist goes live very soon. Follow me here on Dev.to — I'll drop the link the moment it's live. Early subscribers get first access when the store launches. The launch goal: 200 waitlist subscribers before opening the store. That's the benchmark. No exceptions. What's Next Waitlist page goes live 🚀 Product listing page Template preview system First upload — a SaaS landing page template The Real Talk Building a marketplace fr

Your schema is portable. But each runtime loads environment variables differently. CtroEnv adapters bridge the gap — same validation logic, different data sources. Node.js: process.env + .env Files The @ctroenv/node adapter loads .env files and wraps process.env : import { defineEnv , string , number } from " @ctroenv/core " import { loadEnv } from " @ctroenv/node " const env = defineEnv ( schema , { source : loadEnv () }) loadEnv() resolves files in order: .env — shared defaults .env.{NODE_ENV} — environment-specific ( .env.development , .env.production ) .env.local — local overrides (gitignored) Later files override earlier ones. process.env takes precedence unless override: true . Monorepo Root loadEnv ({ path : " ../.. " }) // look up two directories for root .env Native Node 22+ Node 22 has built-in process.loadEnvFile() . Use native: true to delegate: loadEnv ({ native : true }) // uses process.loadEnvFile() if available Falls back to the custom parser on older Node versions. System Fallback By default, only file values are returned. With system: true , missing keys fall through to process.env : loadEnv ({ system : true }) Standalone Parser Use parseEnvFile() directly for custom file loading: import { parseEnvFile } from " @ctroenv/node " const content = readFileSync ( " .env.custom " , " utf-8 " ) const vars = parseEnvFile ( content ) Handles quotes, multiline values (backslash continuation), interpolation ( ${VAR} ), comments, and export prefix. Vite: Build-Time Validation The @ctroenv/vite plugin validates during the build: // vite.config.ts import { ctroenvPlugin } from " @ctroenv/vite " export default defineConfig ({ plugins : [ ctroenvPlugin ({ schema : " ./src/env.ts " }), ], }) If DATABASE_URL is missing, the build fails — no broken artifacts shipped. Schema Options Pass a file path or inline definition: // File path — imports the module, looks for `schema` export ctroenvPlugin ({ schema : " ./src/env.ts " }) // Inline definition ctroenvPlugin ({ schem

TL;DR If the Vercel CLI keeps trying to open a dev link against your Vercel project during local next dev runs, set VERCEL_EXPERIMENTAL_DEV_SKIP_LINK=1 in the shell that launches the dev server, or add it to .env.local at the project root, and restart the process. The flag is opt-in, all-uppercase, and only affects local CLI behaviour. It never reaches your deployed build, and the production runtime on Vercel does not read it. If the CLI still tries to link after a restart, scroll to Debugging when the skip link isn't working for the version-compatibility and process-tree checks that catch the cases the basic setup misses. I have shipped this flag in three production monorepos and the same four mistakes account for almost every "I set it and it did nothing" report I see. What VERCEL_EXPERIMENTAL_DEV_SKIP_LINK actually does VERCEL_EXPERIMENTAL_DEV_SKIP_LINK is an opt-in environment variable the Vercel CLI honours when it runs alongside a local Next.js dev server. Its job is narrow: tell the CLI to skip the step where it would normally reach out to Vercel and create or refresh a dev link against your Vercel project. A "dev link", in the Vercel sense, is a local connection record that lets vercel dev and some Vercel-only local emulators (KV, Postgres, Edge Config) pull real values from a Vercel project. It is useful when you want production-shaped data during development, and a real annoyance when you do not — for example in CI sandboxes, offline laptops, monorepo workspaces that share a single project, or any time you want next dev to behave like a plain Node process without the CLI wrapping it. The variable is shipped under the VERCEL_EXPERIMENTAL_ namespace, which Vercel uses to mark features that can change between CLI versions. That has two practical consequences: the name must be uppercase with underscores, and you should not build production logic on top of it. I treat it like a local-dev knob, set per shell session, and never check it into CI as a hard dependen

Every small task used to mean a new tab. JSON formatter on one site, GST calculator on another, PDF merger somewhere that wanted my email before it would merge two pages. Ads everywhere, slow UIs, and that low-grade worry about uploading a payslip or invoice to a server I do not control. I got tired of juggling twenty bookmarks for work that should take thirty seconds — so I started building one place for all of it. What ToolReign is ToolReign is a free online toolbox: 260+ utilities across 15 categories , all running in your browser. Developer tools (JSON formatter, JWT decoder, API client), text utilities, SEO helpers, PDF and image tools, spreadsheets, and a finance section I built with India in mind — GST with CGST/SGST/IGST splits, EMI and SIP calculators, HRA exemption, gratuity, income tax estimates, and more. The idea is straightforward: open a tool, do the work, leave. No signup wall, no file uploads to a backend, no account to manage. I am Anirudha Sonwane , a Senior Software Engineer at Giant Leap Systems in Pune. ToolReign is a side project I build around my day job — not a pitch deck, just something I wished existed. The tech stack decisions Next.js 14 App Router and static export Each tool lives at its own route under src/app/{category}/{tool-slug}/ . That maps cleanly to SEO: one URL, one search intent, one page of metadata. The site exports statically ( output: 'export' ), so production deployment is uploading an out/ folder to static hosting — no Node server to babysit. The App Router made this scale. Add a page component, register the slug in tool-registry.json , and the sitemap, category hubs, and search index pick it up automatically. At 260+ tools, hand-maintaining URLs would have broken within a month. 100% client-side — the decision that shaped everything This was the core architectural bet, and it is also the privacy story: your data never leaves the browser. Finance calculators are plain TypeScript math with useMemo . PDF merge and split use

Over the past few months, I've been building a gaming website focused on Elden Ring guides, calculators, and tools. While the project started as a simple hobby, it quickly became an interesting experiment in SEO, content strategy, and web development. Here are some lessons I learned along the way. Building the Site Was Easier Than Getting Traffic Launching a website with Next.js was straightforward. Getting visitors was much harder. Many developers underestimate how competitive search traffic can be, especially in gaming niches where large sites already dominate search results. Publishing a website is only the first step. Why I Chose Next.js The project uses: Next.js TypeScript React Tailwind CSS The biggest advantage was SEO. Server-side rendering and static generation helped ensure that search engines could easily crawl and index pages. Performance was also excellent compared to many traditional CMS solutions. Tools Attract Different Users Than Articles One interesting discovery was that calculators and interactive tools behave differently from standard content pages. For example: Guides answer questions. Tools solve problems. A player may read a guide once, but they might return to a calculator dozens of times while planning different character builds. This makes tools valuable long-term traffic assets. Internal Linking Matters More Than Expected When new content was published, internal links helped search engines discover and understand related pages. For example: Build guides linked to calculators. Calculator pages linked to stat guides. Stat guides linked to weapon builds. This created a stronger topical structure around the Elden Ring ecosystem. Search Traffic Takes Time One of the biggest lessons was patience. Many pages received: Zero impressions Zero clicks No rankings for days or even weeks. Then suddenly search impressions started increasing as Google tested pages across different queries. Traffic growth was rarely linear. Content Clusters Work Well Inst

Live demo: https://safestate.vercel.app , code: https://github.com/usv240/safestate A product recall today is basically a notice. It lives on a webpage, or a PDF, or an email that somebody is supposed to read. Say the problem out loud and it gets uncomfortable fast. A recalled crib can be listed and sold to another family, and nobody in that sale ever sees the recall. Reselling recalled goods is actually illegal, and recalled infant products have killed kids. I spent this hackathon building something to close that gap. I called it SafeState, and the idea is small: make the recall do something. When a second-hand item is listed or sold, the marketplace checks SafeState first, and recalled units get blocked right at checkout. It is precise down to the serial number, so safe units still sell. It runs on the stack this hackathon is about. A Next.js front end on Vercel, with Amazon Aurora DSQL behind it. Why DSQL is the whole point here The promise SafeState has to keep is this: the moment a recall lands in any region, no marketplace anywhere should ever read that product as "safe" again. That is a strong consistency problem, not a nice-to-have. If there is any window where a recalled product still looks safe, that is exactly when it gets sold. An eventually consistent store or a nightly sync leaves that window open. DSQL's active-active, multi-region setup with strong consistency is what closes it. I set up a real peered cluster across us-east-1 and us-east-2, with us-west-2 as the witness. Write a recall through one region's endpoint and you can read it back from the other region right away. There is a page in the app that lets you run that yourself. The one trick that makes it work DSQL runs on snapshot isolation (PostgreSQL REPEATABLE READ) with optimistic concurrency. It catches write-write conflicts at commit time. Snapshot isolation will not protect you from write skew, so I had to design around that. To guarantee that a recall and a sale of the same product actua

This is the public, sanitized version of an internal proposal I wrote to move our production app off Next.js. Next.js is the default answer to "I want to build a React app." It's a great framework. But default and necessary aren't the same word. The gap between them quietly cost us speed, debuggability, and a surprising amount of cross-team friction. We were building an authenticated, data-heavy product: dashboards, filters, charts. Almost every screen lived behind a login and updated in response to clicks. For that shape of app, server-side rendering wasn't buying us much, and it was charging us a lot. First, the only question that matters The right architecture depends on what you're building. Content-first: Marketing sites, blogs, storefronts, docs. Mostly public, SEO matters, lots of static content. SSR/SSG is a genuinely great fit. Use Next.js. Seriously. Application-first: Internal tools, dashboards, admin panels, SaaS consoles. Behind auth, highly interactive, bottlenecked by your API and DB — not by React rendering. Put an application-first product on a content-first framework and you pay for machinery you never use. That was us. What SSR actually cost us Production debugging got harder Server-rendered errors don't map cleanly to the components you wrote, so root-causing took longer every single time. Client-side, the error happens in the browser with a stack trace that points at your component. Boring and fast to fix. Server components fought our tests You can't cleanly unit test a server component that renders other server components. Tools like React Testing Library expect renderable elements, not the serialized output a server component produces. We ended up making design choices purely to stay testable. Tail wagging the dog. Authentication became a distributed-systems problem This was a big one. If you gate protected pages on the server, the server must read and validate the token on every request, then propagate auth state through hydration. That singl

TL;DR for vibe coders: Shipped an app with Cursor, Claude Code, or v0 and got a scary Vercel or Neon bill? You probably don't need a bigger plan. You need a few fixes. Not technical? Copy the agent-rules folder from the companion repo into your project and tell your AI editor "apply these cost rules." That's the whole job. You don't need Vercel Pro. You don't need to "Launch" on Neon. A lot of the time you need the opposite of an upgrade. You need your stack to go to sleep. Here's the moment that started this. A Neon bill landed, across three small Next.js apps running on Vercel with a Neon Postgres database, and the breakdown was lopsided in a way that gave the whole game away. $32.65 of it was compute. Storage was 5 cents. History and data transfer were zero. The meter said 308 hours of compute time in about three weeks, which is a database awake for roughly fifteen hours a day, every day. The instinct when a bill climbs is "I must be getting traffic, time for a bigger plan." So before doing that, I opened Google Analytics. Zero users in the last 30 minutes. Meanwhile the database compute was pinned active, and had been more or less around the clock. So this was never a storage problem or a traffic problem. Almost the entire bill was one thing: paying for a database to stay awake doing nothing. Both of those things were true at the same time, and here's the part I'll say up front so nobody has to guess: I didn't hand-write the mistakes that caused this. AI coding agents did. I described features, the agent shipped working code, and that code carried a handful of patterns that quietly defeat scale-to-zero. That's not a confession of bad engineering. It's just what building looks like in 2026. Most of us are vibe-coding onto serverless and cloud infra now, and the agent optimizes for "make the feature work," not "keep the database asleep when no one's around." It has no idea your compute bills by the hour it stays awake, so it has no reason to care. That's the whole

React Server Components in 2026: Patterns, Pitfalls, and When to Actually Use Them Most React Server Components problems stem from teams treating them like regular components with a new rendering location. The architecture shift is deeper than that. RSC fundamentally changes where code executes, what data can cross boundaries, and how developers reason about state. Teams that ignore these constraints burn weeks debugging serialization errors and performance regressions. The pattern that production teams overlook is the server/client boundary itself. Understanding where computation happens, what props can serialize, and when to break out of server rendering determines whether RSC improves or destroys your application's performance. Core Concepts: How RSC Actually Works Under the Hood React Server Components execute on the server and send rendered output to the client. No JavaScript bundle ships for these components. The client receives a serialized tree describing what to render, along with holes for client components to fill. The execution model works like this: the server runs your component tree, fetches data directly, and serializes the result. When the payload reaches the browser, React reconstructs the UI without hydrating server component code. Only client components hydrate with their JavaScript bundles. RSC execution flow from server to client This distinction is critical. Server components cannot use hooks like useState or useEffect because they don't exist in the browser. They render once on the server per request. Client components ship JavaScript and can use the full React API. The implication here is that your component tree becomes a mix of server and client code. The boundary between them determines your bundle size, waterfall depth, and debugging complexity. Production-Ready Patterns: Streaming, Suspense, and Data Fetching The correct pattern for data fetching in server components eliminates the request waterfall. Fetch data directly in the component