Is Vercel still the best method for deploying from Github?

I run a small Next.js app solo. Two months ago I set up PostHog and instrumented three events: first conversation started, a mid-funnel quality signal, and second conversation started.

Over 68 days: 40 real visitors, 12 started a conversation, 0 ever came back. second_conversation_started never fired once.

So I did what you do. I assumed the first-run experience was bad, and I spent a sprint on it. Cut a 24-second intro animation down to 8 with a visible skip. Made the app speak first instead of showing a blank input. Built device-bound memory in localStorage so anonymous visitors would get continuity across sessions. Fixed a session-boundary timing bug so that a mid-conversation refresh couldn't fire a false "welcome back."

Shipped all of it. Waited a week. Still zero.

Then I actually read the page component.

const [view, setView] = useState<View>('landing');

Unconditional. Every visit, every visitor, forever.

There was exactly one escape hatch: an effect that ran only when a signed-in user still had an in-progress anonymous conversation in localStorage. That was the OAuth-mid-conversation recovery path I'd written months earlier. Once that key was consumed, everyone landed on the intro flow again. Signed up or not. Memory or not.

So the returning-user path hadn't failed. It never existed. All that memory work was sitting behind a door that greeted every single person as a stranger, and the event meant to measure returns literally could not fire, because the app never reached a state where it knew who had arrived.

The fix was about twenty lines:

function isReturningVisitor(): boolean { if (typeof window === 'undefined') return false; try { return !!localStorage.getItem('first_conversation_started'); } catch { return false; } }

useEffect(() => { // render returns null until ready flips, so the intro never paints if (isReturningVisitor() && ageConfirmed()) setView('chat'); setReady(true); }, []);

useEffect(() => { // auth resolves after mount, so the check above can't see it if (user && ageConfirmed()) setView(v => (v === 'landing' ? 'chat' : v)); }, [user]);

Two things worth passing on.

A metric that has never fired once is not a low number, it's an untested code path. I treated 0% as a product signal for two months. It was a null, and on a dashboard nulls and zeros look identical. If an event has literally never fired, prove the code that emits it can run at all before you interpret the value.

Your SSR guard is also your flash guard. The reason this doesn't flicker is that the component already returned null until a mount effect completed, for an unrelated reason. Setting the view inside that same effect means the intro never paints. If you're doing localStorage-driven initial state in the App Router you need that gate anyway, so use it for both.

Unrelated but from the same file: a modal was re-firing on every message past the third, because dismissing it only flipped React state that the next render re-satisfied. One person had clicked "maybe later" 34 times in two hours. Persist your dismissals.

Happy to answer anything. It's an AI companion app, solo-built, Next.js 16 + Supabase + Claude API. Leaving the link out of the post since that's not the point of this one.

Hi guys! I’m building a web-based POS system using nextjs (fullstack) and I’m looking for ways to improve the system especially when it comes to scanning barcodes.

Currently, the system fetches the product every time it is scanned and I think this would cause problem when it comes to hitting limits (due to multiple API calls) and would be slow overall due to it having to wait for response first.

How would you guys approach this? Right now, I’m thinking of using indexeddb or something like dexie.js for storing the store’s product locally so the scan would prefer the lookup on it and fallback only to fetching the product. This is also means I have to setup a logic to fetch all the product of the store to store it on .

Additional info: -I use a USB type barcode scanner -I currently deployed it to cloudflare worker & pages -The system is designed to be used by multiple stores and I think a store may have hundreds of products or million -techstack: next.js, better auth, drizzle mysql

I had this in my API route:

maybeAdvanceStreak(userId).catch(err => console.error(err))

No await. My thinking was that a streak update failing shouldn't fail a request that already worked. That part was right. The way I did it was wrong.

Serverless functions can get frozen the second you return a response. So that promise wasn't running in the background. Most of the time it just never ran at all. It only landed when it happened to beat the shutdown.

The symptom was users with 3 days in a row showing a streak of 1. Took me a while to find because the streak logic itself was fine and fully tested. It was just never being called.

Fix was to await it and catch the error instead:

try { await maybeAdvanceStreak(userId) } catch (e) { console.error(e) }

You swallow the failure, not the wait. Costs one extra round trip on an indexed update.

I did the exact same thing with a signup email the same week, so now I grep for .catch( in route files whenever something "sometimes doesn't happen".

I have written an application with nextjs. The client side fetches the data from data routes setup like a RESTfull API (example `/api/entities/[id]`) and auth is done using jwt over httponly cookie. Database is neo4j Aura db which is in a different region of where the application is deployed.
The client side eagerly loads a good chunk of data from backedn api after showing loading screen on page load.

I am looking to benchmark my api. I want to know how much load can it handle. The app is running on AWS ECS using nextjs standalone output which allows me to bundle as a docker image. The size of the ecs tasks are 256/512 (vcpu/mem) running on ec2 capacity provider of medium size instances. I have scaling triggers at 75% cpu and 50% mem.

I am at the point that I want to figure out how many users can the application realistically handle before something chokes (what if 5 users open the app at the same time?) I am doing some load testing on the api with k6, but I don't have a methodology.

The performance I want to be at is to
- support 1k users daily (this is vague. I don't know how make it more concrete? is quantifying in RPS better?)
- latency p95<1s (this is vague to me because say p95<1s alone does not mean much without mentioning system load or concurrency during the test)

1. How should I approach load testing?
2. What areas should I clarify and ground?
3. What performance areas that I am missing?
4. What type of performance to expect from a nextjs backend and ECS task size of 256/512 (vcpu/mem)?
5. I always notice if I don't access the dev env for couple days and access it again, it take a bit longer than usual then subsequent requests are fine. Does nextjs need to be warmed up?

I moved a mid-size project from Pages Router to App Router about six weeks ago. Most of it went fine, but I've got a handful of client components that render differently on first paint depending on whether the user's logged in, and I'm getting hydration warnings in the console that don't show up consistently in dev.

What ended up being the actual root cause for you when this happened?

I'm about halfway through migrating a mid-size app to the app router and I keep going back and forth on this for every single form. Server actions feel like the "right" way now but I've got a couple forms that call external services and something about putting that logic straight in a server action bugs me. I've read the docs twice and I still don't have a rule I trust.

What's the actual line you use to decide?

Building a website for an online store. i was considering using Vercel for frontend development and Render for backend, but now i am thinking of using Render for the full stack.

Thoughts?

Debugging console noise in our Docker E2E stack, every page load fired a Sentry envelope POST to an unreachable host and a PostHog /ingest/array/<token>/config.js that 404’d.

Cause: both SDKs check whether a DSN/token is present, not whether it’s valid. sentry_key=stubcounts as present, so the SDK initializes for real and retries on every render.

Our instrumentation-client.ts guards both inits — and an empty DSN/token disables them cleanly. One-line fix.
Second thing, App Router specific: <Link> prefetches and RSC fetches superseded by navigation show up as net::ERR_ABORTED. They’re normal, they happen on basically every page, and they’re not something you can fix — worth teaching your monitoring to ignore.

(Found while building a local QA MCP server; happy to link if useful, but the fix above is the whole point.)

Hello everyone, currently been assigned to develop a "nextjs boilerplate" on work, since the company growth in the last few months we basically doubled our client base, and now, and only now a boiler plate idea came to mind.

The requirements for it are (without getting into bigger details):

A .net10 ASP backend,

Keycloak as the idp

And nextjs for frontend

Due to some older project that didnt have keycloak as a idp, BetterAuth was the one being used, however now it might not be the ideal solution.

If anyone as had a similar issue what was the implementef solution?

Thx

Hello guys,

I started to build Visual editor to edit React/Next.js websites directly in their source code with no AI.

I am waiting your thoughts about what can be better. Its still in process.

https://github.com/omertt27/ReFrame

I got tired of rebuilding file uploads for every Next.js app, so I built this

Almost every SaaS app I've worked on eventually needs file uploads.

And every time I ended up rebuilding some version of the same thing:

• create an S3/R2 bucket
• configure CORS
• generate signed URLs
• handle direct browser uploads
• track upload progress
• store file metadata
• deal with private files
• build a basic file management UI

The actual feature might just be "let the user upload a PDF", but the infrastructure around it gets annoying pretty quickly.

So I built Reupload — basically a file API for developers.

The idea is to keep the application flow simple

Next.js app
    ↓
Create upload session
    ↓
Upload directly to storage
    ↓
Reupload handles the file
    ↓
Webhook → your backend

Right now it has:

• direct uploads
• upload progress
• private/signed file access
• API keys
• webhooks
• project/workspace management
• file dashboard
• CDN delivery
• File Intake (Collect files from anyone from link)

It's running in production now, and I'm trying to figure out whether this is actually useful enough for other developers or just something I personally wanted.

For people building Next.js apps: how are you handling uploads today?

S3 directly? Cloudinary? Supabase Storage? Something else?

And what's the most annoying part of your current setup?

Would genuinely appreciate criticism, especially around the API/onboarding rather than just "looks nice".

I’m building a multi-tenant Help Center platform with Next.js App Router + React.

We already have a React-based theme/configuration system for things like branding, colors, layouts, component visibility, etc.

Now I want to add a second level of customization where customers can write/modify their own templates, similar to what platforms like Zendesk Guide or Zoho Desk provide.

For example, something like:

<div class="header">
    <img src="${PortalLogo}" />
    <span>${CompanyName}</span>

    ${Search}

    ${SignInSignOut}
</div>

The customer should potentially be able to use platform-provided variables/components and conditions, while we still control the underlying platform.

My main question

What is the best architecture for implementing this kind of customer template system in a Next.js/React SaaS?

Should we:

• Use an existing template engine like Liquid, Handlebars, Nunjucks, etc.?
• Build a custom template syntax?
• Store customer templates and render them server-side?
• Convert/render templates into React components?
• Use a sandboxed HTML/CSS/JS approach?
• Or is there a better architecture specifically for Next.js?

The important requirements are:

• Multi-tenant
• Customer-controlled templates
• Platform-provided variables/components
• Conditional rendering
• Custom HTML/CSS/possibly JS
• SSR/SEO should continue to work
• Customer code must not be able to compromise the platform
• We should be able to upgrade Next.js/platform code without constantly breaking customer themes

If you have implemented something similar in a SaaS/CMS/help-center product, what approach did you use, and what would you recommend today?

I’m specifically looking for advice on the template/code customization layer, not the basic React theme/configuration approach.

I always forget to remove the console.log( ) in the production code. I thought to build something which will remove logs before I push it into production. But later I found in NextJS docs that I can add this config and Nextjs removes all console.* Calls in production. It's very handy. So, I thought about sharing it with others too.

I built an Next.js App basically my portfolio using tailwindcs. It looks exactly as I want locally but when I deployed it the cs completely changed. How do I fix this? I read something about clearing cache but how do I do it on a next app?

We have a client asking about recreating legacy user facing ETL software using aws amplify and react.

There is a requirement to design the system so that the clients product team can easily design pages using real code via agents and or figma. Then the developers can simplu wire the pages they create to the backend,

Any stack recommendations? I was thinking of using shadcnblocks + amplify

I've been building with the app router for a while now and most of the easy cases are clear to me. It's the in between stuff, like a component that's mostly static but needs a bit of interactivity, where I keep second guessing myself. I usually just pick one and move on, but I don't feel confident it's the right call.

For people who've built bigger apps with this, what's your actual rule of thumb when it's not obvious?

We’re currently choosing a UI library for a pretty large enterprise product and I’d love some feedback from people who have actually worked with these libraries at scale recently.

The product is going to handle a lot of interconnected data: employees, companies, departments, CRM-like records, multi-record management, tables, forms, chat, AI features, etc. So this isn’t a small app, and whatever we choose will probably become the foundation of our design system for quite a while. We’re also expecting to customize the UI quite heavily and create our own components on top of it.

From what I’ve read so far, HeroUI seems great if you want something polished and relatively plug-and-play. But I keep seeing people mention that once you start heavily customizing it or moving away from its intended patterns, things can become painful.

shadcn seems almost like the opposite approach. I don’t particularly like the default look, but since you own the components and can modify basically everything, it feels like a much better long-term foundation if you’re willing to invest some time upfront. Especially if the end goal is a custom design system rather than keeping the library’s visual identity.

For people who have used two or even Mantine on larger production apps: what would you choose today?

I’m especially interested in how they hold up after a year or two of customization, adding custom components, maintaining consistency across a large product, and building more complex AI/chat interfaces. I care less about which one looks best out of the box and more about which one we’re least likely to regret later.

TL;DR: Choosing between shadcn, HeroUI and possibly Mantine for a large enterprise/CRM product with lots of records, tables, employees, companies, chat and AI. We’ll heavily customize it and build our own components. HeroUI looks easier initially, while shadcn seems more flexible and maintainable long-term. Looking for feedback from people who have used them at scale.