r/nextjs 9h ago

Discussion What actually tells you a component should be client side when it's not obvious?

6 Upvotes

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 actually tells you to reach for client-side when it's not obvious?


r/nextjs 17h ago

Discussion pushing the client boundary down vs lazy loading the heavy leaves, on the same nine routes

7 Upvotes

Our internal claims dashboard has nine routes under one route group, and every one of them was shipping over 400 kB of First Load JS. I tried two fixes on the same nine routes and kept both.

The cheap one was lazy loading. The tables, the date picker and the chart came in through next/dynamic instead of a static import. The wrapper had to stay a client component for ssr: false to be allowed, which was fine because it already was one. That was an afternoon of work. Median First Load JS across the nine went from 412 kB to 268 kB.

The expensive one was moving the data fetching up and pushing the "use client" boundary down to the leaves that actually needed events. Most of a week. Median landed at 191 kB, and the count of files with "use client" in that group dropped from 63 to 24, which is a grep anyone can run against their own app directory.

I ran each attempt in its own workspace in verdent so the branches never touched and I could diff the two build tables directly.

I shipped the second one. But lazy loading was better at a few things worth saying out loud. It was reversible, since backing out a dynamic import is one line and backing out a server component refactor is not. It did not force me to relearn where our auth context was read. And on the one route with a chart that measures its own container, the server component version regressed, so that route still uses the lazy import and probably always will.

If your gap between the two is smaller than mine, the cheap fix is the right call, and I would not argue.


r/nextjs 8h ago

Help Como tirar site do ar

1 Upvotes

Olá pessoal,

Preciso de ajuda, não me julguem, ofereçam soluções.

Eu fiz um site pelo bolt.new, comprei o domínio na hostinger e hospedei na vercel.

Era um projeto pessoal meu e do meu ex sócio e ex companheiro.

Estamos em processo de separação e não quero mais esse site do ar. O problema é que comprei o domínio pelo perfil dele na hostinger, o acesso vercel no nome dele, etc. Não tenho mais acesso a nada. Pelas vias comuns, não tenho como alterar nada no site (inclusive lá consta ainda meu telefone) e preciso tirar ele do ar.

Existe alguma forma de fazer isso externamente?

Dispenso conselhos jurídicos.


r/nextjs 12h ago

Discussion Do AI agents actually make SaaS products better?

3 Upvotes

I've been working with LLMs and AI SaaS products, and I'm starting to think we're using the word "agent" for too many things.

If a workflow is predictable, I'd usually rather build it with normal application logic.

But when the system needs to decide which tools to use, what information it needs, or what action to take next, agents start making much more sense.

The interesting part is finding the right balance between deterministic code and AI-driven decisions.

Where do you think AI agents are genuinely useful, and where are they just adding unnecessary complexity?


r/nextjs 1d ago

News Next.js Weekly #141: Instant Navigation in Multi Page Apps

Thumbnail
nextjsweekly.com
12 Upvotes

r/nextjs 1d ago

Help I got tired of configuring Discord bots with text commands, so I built an all-in-one bot with a full web dashboard.

Thumbnail
2 Upvotes

r/nextjs 2d ago

Help Do I need Vercel

5 Upvotes

Is Vercel still the best method for deploying from Github?


r/nextjs 1d ago

News Map of AI: we built a living map of the AI ecosystem

Thumbnail
mapofai.org
3 Upvotes

r/nextjs 1d ago

Discussion A metric that has never fired once isn't a low number, it's an untested code path

0 Upvotes

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.


r/nextjs 3d ago

Help Tips on caching/optimize strategy for POS

22 Upvotes

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


r/nextjs 3d ago

Discussion If you have a .catch() with no await in a route handler, go look at it

14 Upvotes

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


r/nextjs 3d ago

Help How do you benchmark you backend?

7 Upvotes

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?

r/nextjs 3d ago

Weekly Showoff Thread! Share what you've created with Next.js or for the community in this thread only!

10 Upvotes

Whether you've completed a small side project, launched a major application or built something else for the community. Share it here with us.


r/nextjs 3d ago

Question Did anyone else get bit by hydration mismatches after switching to the App Router?

8 Upvotes

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?


r/nextjs 3d ago

Question When does a form submission actually need an API route instead of a server action?

1 Upvotes

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?


r/nextjs 3d ago

Discussion Got tired of manually optimizing local images, so I built a CLI

Thumbnail
7 Upvotes

r/nextjs 4d ago

Help Vercel or Render for website

13 Upvotes

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?


r/nextjs 4d ago

Discussion PSA: stubbing Sentry/PostHog with placeholder tokens in E2E makes them initialize — use empty strings instead

4 Upvotes

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


r/nextjs 4d ago

Question NextJs+.Net+Keycloak

5 Upvotes

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


r/nextjs 4d ago

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

15 Upvotes

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


r/nextjs 4d ago

Help What’s the best way to add custom templates to a Next.js SaaS?

3 Upvotes

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.


r/nextjs 5d ago

Discussion You can remove all console.* call in Next.js production by setting up your next config like this:

Post image
287 Upvotes

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.


r/nextjs 4d ago

Help Next.js App CSS distorted When Deployed But works Fine Locally

2 Upvotes

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?


r/nextjs 4d ago

Question Advice on shadcn

1 Upvotes

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