标签：#NeXT

Most SaaS founders build the dashboard first. It looks impressive in demos, investors love screenshots, and it feels like real progress. We did the opposite. Here's why. The real reason approvals fail When I started building TeamAutomation, I interviewed a dozen people about their approval process. Every single one said the same thing — approvals don't fail because people reject them. They fail because nobody follows up. The requester sends the request. The approver gets busy. Nobody wants to be the annoying person who keeps pinging. Days pass. Project blocked. A dashboard showing "pending approvals" doesn't fix this. The approver still has to remember to open it. Nudges are the product We ship automatic reminders at 24 hours, 3 days, and 7 days — directly in Slack where the approver already lives. No new app to open. No new habit to build. The accountability shifts from the requester to the system. That's the whole unlock. What we learned Build the thing that changes behavior first. The dashboard is just reporting. Nudges are intervention. If you're building any kind of workflow tool, ask yourself — what happens when nobody does anything? Your answer to that question is your core feature. What's next Still in early beta. Slack Directory approval pending. Zero users, full transparency. If you're dealing with approval chaos in your team, drop a comment — happy to give early access.

Caching in e-commerce is never just about speed. A fast storefront is useful only if it still shows the right price, the correct stock level, and the right experience for the current customer. That is why caching in a Next.js storefront can be deceptively hard. Some data should be shared broadly and kept warm for SEO and performance. Some data should be refreshed often. Some should never be shared between users at all. Next.js 16 gives teams a much clearer toolbox for solving this problem with Cache Components, use cache , tag-based invalidation, and explicit cache lifetime controls. Used properly, these features let you keep pages fast without drifting into stale commerce data. In this guide, I will walk through a practical way to think about caching in a modern storefront and show how to combine use cache , cacheLife , and revalidateTag for real e-commerce use cases. Why Caching Is Harder in E-Commerce Than in a Typical Content Site On a standard marketing site, most content changes infrequently. If a page is cached for a few minutes or even a few hours, the business impact is usually negligible. Commerce systems work differently. The same product page may contain: stable product descriptions and category copy semi-dynamic data such as price, availability, shipping estimates, or promotion labels private data such as cart state, recently viewed items, or customer-specific pricing Treating all of that data the same way leads to one of two bad outcomes: You cache too aggressively and serve stale prices or availability. You disable caching everywhere and lose the performance benefits that help SEO and conversion. The better approach is to split your data by volatility and audience. The Three Cache Boundaries That Matter Most For most commerce projects, the cleanest mental model is to divide data into three groups. 1. Stable catalog content This is the part of the page that usually changes only when content editors or merchandisers update the catalog. Examples: product

The first time I deployed a Next.js app to production, it took me three days. Not because the app was complicated — it was a straightforward portfolio site. It took three days because I had no idea what I was doing with AWS, I'd never written a GitHub Actions workflow, and every tutorial I found either skipped the hard parts or assumed I already knew them. By the time I was done, I had a deployment pipeline I was genuinely proud of: push to main, GitHub Actions runs the build, tests pass, the app deploys to an EC2 instance behind CloudFront. Zero manual steps. Zero downtime deploys. Total cost: about $5/month. This guide is the one I wish had existed. We're going to deploy a Next.js app to AWS from scratch — EC2 for compute, CloudFront for CDN, GitHub Actions for CI/CD — with every step explained so you understand what you're building, not just copying commands. Why AWS Instead of Vercel? This is a fair question. Vercel is genuinely excellent for Next.js, and for most projects it's the right call. You push, it deploys. Done. AWS makes sense when: You need to control the infrastructure (compliance, data residency, custom VPC configuration) You're running other services (databases, queues, lambdas) in AWS and want everything in the same network You want to learn infrastructure skills that transfer to enterprise environments Your app has specific performance requirements that benefit from custom CloudFront configuration You're a freelancer or consultant who wants to bill separately for infrastructure If none of those apply to you, use Vercel. This guide is for when they do. The Architecture Here's what we're building: ┌────────────────────────────────────────────────────────┐ │ GITHUB ACTIONS CI/CD │ │ │ │ Push to main → Build → Test → Deploy to EC2 │ └──────────────────────┬─────────────────────────────────┘ │ SSH deploy ▼ ┌────────────────────────────────────────────────────────┐ │ AWS EC2 INSTANCE │ │ │ │ Ubuntu 22.04 LTS │ │ Node.js 20 + PM2 (process manager) │ │ N

There's a specific feeling you get after your third production caching incident. It's not panic....

Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js Este error ocurre cuando el HTML generado en el servidor (SSR) no coincide con el árbol de React que se construye durante la hidratación inicial en el navegador. Es un problema crítico que rompe la experiencia de usuario y puede causar comportamientos impredecibles. Causa raíz En tu caso, el error está relacionado con contenido dinámico que varía entre renderizado del servidor y renderizado del cliente , probablemente por: Uso de Date() o new Date() en el renderizado (ej. fechas de eventos como JUN 9 , JUN 11 , etc.) Uso de typeof window !== 'undefined' o APIs del navegador directamente en el render Metaetiquetas o scripts que modifican el DOM antes de la hidratación (como iOS detectando fechas como enlaces) Configuración incorrecta de librerías CSS-in-JS o Edge/CDN que modifiquen el HTML Solución definitiva (pasos) ✅ Paso 1: Aisla el contenido dinámico con suppressHydrationWarning Si el contenido que varía es intencional (como fechas de eventos), envuelve solo el elemento problemático con suppressHydrationWarning={true} : // app/page.tsx o app/events/page.tsx export default function EventsPage () { const events = [ { name : ' NEXT.JS NIGHTS ' , date : new Date ( ' 2024-06-09 ' ) }, { name : ' AMS ' , date : new Date ( ' 2024-06-11 ' ) }, { name : ' LDN ' , date : new Date ( ' 2024-06-18 ' ) }, ]; return ( < div > < h2 > VIEW EVENTS </ h2 > < ul > { events . map (( event , i ) => ( < li key = { i } > < strong > { event . name } </ strong > { /* ✅ Solo este elemento usa suppressHydrationWarning */ } < time dateTime = { event . date . toISOString () } suppressHydrationWarning > { event . date . toLocaleDateString ( ' en-US ' , { month : ' short ' , day : ' numeric ' }) } </ time > </ li > )) } </ ul > </ div > ); } ⚠️ Importante : suppressHydrationWarning solo funciona en el elemento inmediato, no en hijos. Usa span , time , div , etc., no en contenedores grandes. ✅ Paso 2: Evita Da

“Did We Already Watch This?” — Building KindaSeen with FastAPI and Next.js A few months ago, my friends and I kept running into the same question whenever we talked about movies, dramas, anime, or variety shows: “Did we already watch this before?” Sometimes we remembered the title but forgot whether we had finished it. Other times, we completely forgot we had already seen it at all. That simple problem inspired me to build KindaSeen, a full-stack personal media repository designed to help users track and organize the media they’ve consumed in one centralized platform. The goal of the project was not only to create a useful application, but also to gain hands-on experience building a real-world full-stack system with modern web technologies. What KindaSeen Currently Supports User authentication with Supabase CRUD operations for personal media records TMDB-powered search functionality Watchlist system Favorites system Persistent PostgreSQL storage Dockerized backend deployment Separate frontend/backend deployment workflow Tech Stack Frontend Next.js React Tailwind CSS Shadcn/ui Vercel deployment Backend FastAPI PostgreSQL Docker Render deployment External Services Supabase Authentication TMDB API integration One of the main goals of this project was to simulate a more realistic production workflow by using a decoupled frontend/backend architecture instead of building everything inside a single monolithic application. In this article, I’ll share: Why I chose this architecture How I integrated TMDB into the application Challenges I faced during deployment What I Learned From Building KindaSeen Why I Chose This Architecture Instead of building a monolith using Next.js API routes, I decided to decouple the application into a Next.js frontend and a FastAPI backend. This decision was driven by three main factors: AI Compatibility & Future Proofing : While researching the job market, I noticed that most companies building AI products heavily rely on Python. By choosing FastA

📚 This is Part 1 (Opening) of the UtlKit Tech Series — Next: [Architecture & Trade-offs →] As a frontend developer, I've used countless online tools. And almost all of them suck: Sign-up required — just to format a JSON string? Ad overload — the actual tool gets squeezed into a corner Privacy concerns — your JSON might contain API keys, and the tool sends it to a server Fragmented — formatters on one site, Base64 on another, hashing on a third So I decided to build one that doesn't: no sign-up, no ads, pure client-side computation, data never leaves the browser. The goal was simple — if I need this tool, someone else does too. The result is utlkit.com : 150+ tools, 8 categories, zero server costs. Requirements Requirement Meaning Pure client-side All logic runs in the browser Zero server cost Static hosting, no Node.js backend 150+ pages One page per tool, SEO-friendly Bilingual (EN/ZH) i18n support Dark/Light mode User preference Mobile responsive Works on all devices Why Not Other Frameworks? Option Pros Cons Verdict Vanilla HTML/JS Simple Managing 150+ pages is painful Too slow VuePress / VitePress Fast Docs-oriented, not for interactive tools Not flexible enough Nuxt SSR Powerful Needs a server Violates zero-cost principle Next.js 15 + output: 'export' SSR SEO + client interactivity + static hosting Has pitfalls (covered later) ✅ Best balance The Key Decision: output: 'export' // next.config.js const nextConfig = { output : ' export ' , // Static export trailingSlash : true , // Required for static files images : { unoptimized : true }, // No image optimization server } This means: ✅ Build output is plain HTML/CSS/JS files ✅ Deployable to any static host (Cloudflare Pages, Vercel, GitHub Pages) ✅ Zero server cost ❌ No API Routes, no Server Components, limited dynamic routing Deployment: Zero Cost on Cloudflare Pages Build output : out/ directory, ~14 MB Hosting : Cloudflare Pages Domain : utlkit.com Monthly cost : $0 Build Pipeline npm run build → next build ( o

Last year I needed to ask for a raise. I knew my number, I'd read the guides, I had bullet points in my notes app. Then my manager said "let's chat about your goals for next quarter" and I said "sounds great, looking forward to it" and hung up. Never brought up money. Same thing kept happening elsewhere. Coworker taking credit for my work, I said nothing. Relationship that should've ended months earlier, I kept postponing. I always knew what to say. I just couldn't say it with someone actually looking at me. So I started building a thing to practice on. That thing became cosskill . What it actually is You pick a persona, tell it the situation in a sentence, and start talking. The persona doesn't help you. It holds position and pushes back. You practice not folding. Think of it as a flight simulator for hard conversations. You rehearse until your opener comes out steady, then go do the real thing. 20 personas across five categories: Operators (Musk, Jobs): first-principles thinking, harsh product feedback Strategists (Trump, Buffett): treat everything as a deal or a bet Relationship (Ex, Coworker): breakups, workplace friction, family money Philosophy (Socrates, Aurelius, Confucius, Sun Tzu, four more): each tradition frames problems differently Psychology (Rogers, Rosenberg, Ellis, Frankl, Kahneman, Jung): therapeutic frameworks on real situations These aren't celebrity impressions. The Buffett persona won't hype your startup idea. It'll ask "what's the downside?" and keep asking until you have something concrete. Tech stack Next.js 16 on Cloudflare Workers. DeepSeek for inference. Cloudflare D1 (SQLite at edge) for the bits that need to persist. No user accounts, chat history lives in localStorage. Monthly cost stays low enough that the free tier (10 messages/day) doesn't worry me. Why I made these choices DeepSeek instead of GPT-4/Claude. Each conversation is 10-30 messages. At GPT-4 pricing a free product bleeds money. DeepSeek gives maybe 90% of the quality for

A physiotherapist asked me a simple question a couple of months ago: "Can you build something to run my whole clinic?" So I did — solo, in about a week. Here's the full 2.5-minute walkthrough 👇 What PhysioFlow does PhysioFlow runs an entire physiotherapy clinic from one screen — built for India (₹, GST, WhatsApp, +91): Dashboard — attendance, collections & pending bookings at a glance Patient files — recharge session packs, track usage, auto-generate GST-ready bills Attendance in seconds with a QR scan Online bookings that convert straight into a patient file Reports — daily ledger, revenue, CSV/PDF export Patient portal — patients see their own sessions & prescriptions The stack Next.js + Supabase + TypeScript — multi-tenant, with row-level security so no clinic's data ever leaks to another. Try it Live now with a 14-day free trial, no card needed → https://physioflow.devfrend.com I'm Amar, a full-stack & AI engineer. I design and build products like this end-to-end. I'm open to work — SaaS builds, MCP servers, LLM apps & automation. Reach me on LinkedIn .

> TL;DR — I run four different domains off one Next.js codebase: a marketing site at pagestrike.com , an authenticated app at app.pagestrike.com, a public publishing domain at pagestrike.app, and customer-owned domains. The trick isn't deploying four apps — it's a single proxy.ts that reads the host and rewrites/redirects/passes-through per-request. This post walks through why I chose this shape, the parts I got wrong, and the cookie-domain trick that makes it all stick. Stack: Next.js 16 App Router , Supabase , Vercel , one proxy.ts file (~370 lines). This is the second post in my build-in-public series on PageStrike . Last week I wrote about the 6-CTA architecture — modeling conversion intent as a discriminated union so one launch could be a checkout, a COD form, or a calendar booking. This post is about a different primitive: modeling host as routing context so one codebase can serve four very different audiences. Why four domains, not one Most SaaS apps live at one domain — say myapp.com with /dashboard under it. That works until you grow into edge cases that don't fit: Marketing pages get spammed by your own dashboard headers. Your marketing nav says "Sign in / Pricing / Blog". Your dashboard nav says "Launches / Contacts / Settings". You either A/B them with conditional logic everywhere or you live with the noise. Public user-generated pages share your domain reputation. When a customer publishes a landing page at myapp.com/p/[slug] , every spammy LP from a free-tier user drags down myapp.com 's sender reputation, search trust, and ad-account standing. Google and Meta penalize the host, not the path. Custom domains don't route cleanly. A customer who buys acmewidgets.com and points it at your app expects their LP at acmewidgets.com/ — not myapp.com/p/acme-widgets . You need a rewrite that's transparent to the visitor, doesn't 404 on _next/static/* , and survives RSC prefetches. I split PageStrike — a free AI landing page builder — across four hosts to solve al

I'm 15 and Built an AI Energy Dashboard with Next.js 15 + Groq Hey Dev.to! 👋 I'm a 15-year-old student developer from South Korea. I just finished my first real production project — FuelScope AI. What is it? An energy market intelligence dashboard that uses Groq's Llama 3.3 70B to summarize real energy news in real time. 🔗 Live Demo: https://fuelscope-ai.vercel.app What it does ⛽ Regional gas price cards 📈 Energy stock tickers (XOM, CVX, SHEL) 🤖 AI-summarized energy news (Llama 3.3 70B via Groq) 🗺️ Interactive Mapbox station map 📍 GPS nearest station finder 🎨 Apple-inspired clean design Tech Stack Next.js 15 + TypeScript Tailwind CSS Groq API (Llama 3.3 70B) — FREE tier GNews API — FREE tier Mapbox GL JS Vercel deployment What I learned This was my first time building something with: Real API integrations AI summarization pipeline Production deployment on Vercel Apple design system principles Honestly learned more in 4 days building this than months of tutorials. Honest disclosure Gas prices and stock data are mock values — the README includes guides for swapping in real APIs (EIA, Alpha Vantage, etc.). The AI news summaries are 100% live though. Template I'm selling the template for $19 on Gumroad if anyone wants to build on top of it: 👉 https://LZF01.gumroad.com/l/djzoaj Would love any feedback from the community! 🙏 Built with Next.js 15, Groq, GNews, Mapbox

I'm a maxillofacial surgeon in Ouagadougou, Burkina Faso — and a self-taught builder who's been coding since medical school. Over evenings and weekends, I shipped Readium — a production AI reading app that lets you discuss books with Claude while you read them, in any language. Built AI-paired with Claude, reviewed and deployed by me. Most "I shipped an AI app" write-ups cover the happy path: clone a starter, glue an LLM, deploy to Vercel. The walls I hit weren't there. They were in the spaces between the libraries. Here are five of them — and what I'd tell myself a few weeks ago. Wall 1 — SSE streaming broke at the seam between the LLM and the browser I assumed streaming "just worked" once OpenRouter returned a stream. It does — until your server-side handler, your reverse proxy, or your browser code introduces a buffer somewhere along the path. The chain has at least three places where buffering can silently kill streaming: The LLM API (fine on its own) Your Node server-side handler (fine if you forward chunks instead of accumulating them) The reverse proxy / CDN (often buffers entire responses by default) The failure mode is always the same: the UI looks exactly like the LLM is slow. It isn't — somewhere between OpenRouter and the browser, bytes are being withheld until the connection closes, then dumped in one chunk. What I'd tell past-me: streaming isn't a feature of the LLM, it's a property of your entire request path. If you can't watch tokens land character-by-character in curl -N against your origin, you don't have streaming, you have a slow non-stream pretending. Set Cache-Control: no-transform and X-Accel-Buffering: no headers from your handler, disable response buffering on every layer in front of it, and verify with curl -N before you trust the UI. Wall 2 — fetch hangs forever on certain hosts (and the fix isn't where you think) I had a proxy route that fetched from an external API. Worked locally. Worked in staging. Deployed to production: the route wo

My Experience Using dnd-kit in React and Next.js For a long time, I avoided building drag-and-drop features in frontend projects 😅 Not because I did not need them. Mostly because drag and drop always felt unnecessarily complicated. When you think about implementing it, your brain immediately jumps to: animations sorting logic touch support accessibility performance state synchronization and suddenly a simple UI interaction feels like a massive feature. But recently, in one of my React and Next.js projects, I decided to finally try dnd-kit. Honestly, it changed my perspective completely. I used AI to help me with the initial setup and understanding some concepts like sortable contexts and drag events, but after that, working with the library felt surprisingly smooth. And that's what impressed me most. dnd-kit feels lightweight, modern, and flexible without becoming overwhelming. It gives you the tools you need without forcing a huge architecture or complicated patterns on your app. Things I Personally Liked About dnd-kit Very clean React-first API Lightweight and composable Works really well in React and Next.js projects Building sortable lists feels much simpler than expected Flexible enough for custom UI and interactions Good developer experience overall Something Interesting I Noticed When a library has a clean architecture and predictable patterns, AI becomes much more useful while learning it. The generated examples were easier to understand, easier to debug, and easier to customize compared to many older drag-and-drop solutions. If you are building things like: kanban boards sortable lists draggable cards dashboards reorderable tables I definitely recommend taking a look at dnd-kit. It ended up being much simpler and more enjoyable than I expected. Website https://dndkit.com/

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built I built and revived Mandi Central , a complete business operations and billing system for mandi-style trading businesses. Live Project: https://mandicentral.in Mandi Central helps manage daily mandi operations like purchases, farmer purchase entries, sales entries, payments, bank and cash ledgers, accounting heads, reports, invoices, outstanding balances, and financial statements from one structured platform. This project was not started as a simple demo. It was a real business-focused software project, but it had many unfinished parts, broken flows, missing reports, pending PDF generation, incomplete mobile API planning, and several UI and accounting issues. For the GitHub Finish-Up-A-Thon Challenge, I brought it back, fixed the pending issues, completed the core business flow, and made the project live on mandicentral.in . Demo Live Website: https://mandicentral.in GitHub Repository: https://github.com/hiijoshi/bill Screenshots and demo cover the completed modules: Business Operations Hub Sales List Bank reconciliation Cash ledger Bank ledger Sales entry Purchase entry Farmer purchase entry Bulk PDF download Accounting reports Party ledger redirection Outstanding reports Mobile API-ready backend The Comeback Story Mandi Central started with a strong idea: create one platform where mandi businesses can manage their complete daily workflow. But before this challenge, the project was stuck with many incomplete and pending items. There were more than 40 pending issues across PDF generation, sales invoices, bank ledger, cash ledger, accounting reports, outstanding reports, purchase calculations, sales calculations, mobile APIs, AWS deployment, domain setup, and UI fixes. Some of the major problems before completion were: PDF generation was not working properly. Bulk sales bill download was missing. Mobile application APIs were pending. Farmer Purchase Entry API was pending. Purchase Entry API w

When Mozilla shut down Pocket in July 2025, I lost my favorite tool. Worse, none of the English alternatives (Instapaper, Readwise, Matter, Raindrop) had Japanese UI, and their article extraction was mediocre on Japanese pages. So I built one. It's called Readbox — Japanese-first, English-too, read-later as a PWA. Here's what I learned shipping it. The stack Next.js 15 App Router + TypeScript strict (no any ) Supabase (Postgres + Auth + RLS) Stripe (JPY + USD prices, locale-routed) Tailwind CSS Service Worker for PWA install + offline read Three things that bit me 1. Article extraction on Vercel serverless First attempt: Mozilla Readability + jsdom. Doesn't bundle on Vercel because of ESM compatibility issues and the 50MB serverless function size limit. I tried 6 approaches — Webpack externals, dynamic imports, edge runtime — none worked cleanly. Ended up using Jina Reader , which returns clean Markdown/HTML from any URL. Trade-off: third-party dependency, rate limits at scale. But it works today, and it's free. 2. Storing article body on-device I didn't want to host millions of articles' worth of HTML on Supabase (cost + privacy). Solution: extracted HTML lives in the browser's IndexedDB only (via Dexie); only metadata (URL, title, tags, read status) syncs to the server. Trade-off: cross-device sync of body content doesn't work seamlessly. Acceptable for a "read it later" workflow where you usually read on the device you saved on. 3. i18n routing — the silent sitemap killer For Japanese + English from one codebase: app/[locale]/ segment with /en prefix for English (default Japanese has no prefix, to preserve old URLs). Middleware detects cookie / Accept-Language and redirects accordingly. The gotcha (cost me a launch-day hour): middleware matcher excludes _next , api , image extensions — but if you forget .xml/.txt/.webmanifest , sitemap.xml and robots.txt get rewritten to /ja/sitemap.xml (which doesn't exist as a route → 404). Fix: export const config = { matcher

The CI was green. Build passed. No TypeScript errors. No warnings. Everything looked clean. I...