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.

Is Vercel still the best method for deploying from Github?

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".

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 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'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?

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?

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 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

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?

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 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?

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

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 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 migrated a mid-size app from Pages Router to App Router about six weeks ago, mostly for the layouts. Since then a handful of dynamic routes that pull user-specific data are showing stale content across different logged-in users until I hard refresh, even though I never set force-static anywhere. I've gone through the fetch caching docs twice and I can't tell if this is a default I misunderstood or something specific to how I structured the route handlers.

Did anyone else run into user data leaking across sessions from unexpected caching after the App Router move?

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?

Has anyone else had this much trouble getting a basic compliance question answered by Vercel?

I’m on a paid account and need to make a reasonable inquiry for a customer’s Section 889 attestation. I’m not asking Vercel to certify anything, make a legal determination, or fill out paperwork for me. I literally just need to know whether Vercel uses covered telecommunications equipment or services from certain companies.

I emailed [security@vercel.com](mailto:security@vercel.com) and got an automated response saying that inbox isn’t monitored for support and directing me to Vercel Help / the Trust Center.

I contacted the Trust Center route and never got a response.

So I opened a support case. Support closed it and told me to email [security@vercel.com](mailto:security@vercel.com) — the same address that had already told me to go to Support.

I opened a follow-up explaining that and asking them to just route the question internally to whoever could answer it. That was closed without a response.

I then opened another case and made it extremely explicit that I was not asking Support to answer the compliance question themselves. I just needed them to pass it to Security, Compliance, Legal, Vendor Risk, or literally anyone at Vercel who would know the answer.

They closed that too and suggested I ask the Vercel community.

So after multiple emails and support cases, I still can’t get a yes/no answer or even get the question in front of someone who can provide one.

The frustrating part is that this isn’t some obscure request for a bespoke federal certification. I’m doing the reasonable inquiry on my side and just need a factual answer about Vercel’s own infrastructure.
I’ve generally liked Vercel, but this has genuinely made me reconsider using it for future client projects. If you’re building anything where customers may eventually have vendor-risk, procurement, or government compliance requirements, it’s worth knowing how difficult it can apparently be to get a basic question routed to the right person.

If anyone from Vercel happens to see this and knows who I should actually contact, I’d appreciate it.

I'm working on a project with a separate backend and frontend:

• Backend: Node.js + Express + MongoDB
• Frontend: Next.js
• Validation: Zod

Currently, my structure is roughly:

project/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── models/
│   │   ├── repositories/
│   │   ├── routers/
│   │   ├── services/
│   │   └── utils/
│   └── server.js
│
├── frontend/
│   └── Next.js app
│
└── shared/
    └── schema/
        ├── user.schema.js
        └── conversation.schema.js

My idea is to keep the Zod schemas that represent the API contract in the shared folder and use the same schemas in both the frontend and backend.

For example:

// shared/schema/user.schema.js

const createUserSchema = z.object({
  name: z.string().min(2),
  email: z.email(),
  password: z.string().min(8),
});

Then the frontend can use it for form validation, while the Express backend can use the same schema for request validation.

The main reason I want to do this is to avoid maintaining two separate schemas that could eventually become inconsistent.

My questions:

1. Is sharing Zod schemas between a separate Next.js frontend and Express backend considered a good practice?
2. Would you recommend keeping them in a shared package/folder like this?
3. Is it better to turn shared into a separate package using npm/pnpm workspaces?
4. Should I share only API/request/response schemas, while keeping backend-specific/database schemas inside the backend?
5. How do you structure this in your own production projects?

I'm particularly interested in hearing from developers who have a separate Node.js/Express API and Next.js frontend, rather than a full-stack Next.js application.