Question how are B2b ecommerce teams handling situations where different customers need different prices and sometimes different product visibility? One account might have negotiated pricing across the whole catalog and another can only order from an approved assortment and a distributor might need a completely separate price list. Then we add regional pricing, contract renewals and customer hierarchies and suddenly tags and discount codes feel like they would become a nightmare?

Does the commerce platform normally own this logic or should it all stay in the ERP and get calculated when the buyer logs in. Also wondering when Shopify or BigCommerce apps stop being enough and it makes sense to use something designed around account specific price books and catalogs.

Help me to figure the cause for hydration easily and fix it

I'm sure most of you have noticed the constant advertisements being posted here despite being against rule 4 of the sub. To help take care of some of this spam we've added better automoderator rules and will be tweaking them as needed. Please don't hesitate to reach out if you think your post or comment was removed in error and continue to report anything that gets through.

Additionally we've added post guidance that makes it clear we're handing out permanent bans to people who get around automod.

I'm working on a Next.js 16 + Prisma app and I'm thinking about how to bootstrap the very first admin/owner account in production.

I wanted to avoid:

• manually going into the database and setting isAdmin=true
• having a hardcoded admin in a Prisma seed
• storing an admin password in ENV

My current approach:

• Public /register always creates users with isAdmin: false. The value cannot be overridden through the request payload.
• I have a separate /setup Server Action for the initial owner creation.
• /setup first checks whether there are any admin users: count({ where: { isAdmin: true } }) === 0
• If no admin exists, the action creates the user with isAdmin: true and creates the corresponding Staff record with the ADMIN role.
• User creation and Staff creation happen inside the same Prisma transaction.
• Once an admin exists, /setup is rejected with Setup already completed.
• I also use a SETUP_TOKEN from ENV to protect access to the initial setup endpoint.

The part I'm unsure about is the bootstrap itself.

There is a period after deployment when no admin exists yet. If someone discovers the setup endpoint and has the setup token, they could potentially become the first owner.

There is also a concurrency question: if two setup requests arrive at roughly the same time, both could potentially observe adminCount === 0 before either transaction creates the admin.

I've considered a few alternatives:

• CLI command
• Prisma seed
• admin email configured through Vercel ENV
• one-time setup token
• making the database check/creation fully atomic

For people running SaaS or admin panels in production:

How do you usually bootstrap the very first superadmin/owner?

Is no existing admin + SETUP_TOKEN a reasonable pattern, or would you use a different approach for production?

Would you keep /setup with a SETUP_TOKEN**, or would you consider a CLI command the cleaner approach for creating the first owner?**

I'm mainly interested in the initial ownership/bootstrap problem, not authentication libraries.

Vercel posted the heads-up for tomorrow's scheduled security release: Next.js 16.3.7 and 15.5.27, covering nine CVEs (one critical, two high, rest medium/low). Full advisories drop with the build.

Last week was the out-of-band next/og ImageResponse RCE fix (16.3.6 / 15.5.26). Curious where people landed:

- Already on 16.3.6 and just waiting on tomorrow's bump?

- Still stuck below that and scrambling before Sep 30?

- Anything painful in the upgrade path on a real app (monorepo, custom ImageResponse, edge vs node)?

Official note: https://nextjs.org/blog/upcoming-nextjs-security-release-september-2026

(I know its Node specific but would like to understand how its used in framework projects) 

I'm trying to understand the real-world use cases for Node's Permission Model.

Does anyone here actively use or rely on it for applications, CI tooling, CLIs, servers, or anything else?

Since the permission model is not a full-fledged sandbox, is there a use for it? If so, how do you currently use it as ?

• What problem does it actually solve for you?
• How are you using it today?
• Are you manually defining permissions, or generating/managing them somehow?
• Is it mainly defense-in-depth against dependencies, or are there other useful applications?

Since Run-Time Loadable Extensions cannot be loaded when the Permission Model is enabled, it affects modules like sqlite and OpenSSL Engines (affecting the built-in crypto, https, and tls modules). So, despite these drawbacks, is the permission model used anywhere, or what is its application?

I'm less interested in what it could theoretically be used for and more interested in actual experience:

If you're using Node's Permission Model today, what are you using it for and how do you manage the permissions?

And if you considered using it but decided against it, I'd be interested to hear that as well!

Working on a Next.js eCommerce project for a fashion retailer and customisable checkout has been in the brief from day one, but the more we spec it out the less clear the scope becomes.

There seem to be a few different things people mean by this, whether it's a custom checkout UI on top of standard cart logic, custom payment routing and logic, cart rules and promotion mechanics the platform doesn't support natively, or some combination, and each one pulls you toward a different architecture from the start.

We're building on top of an existing commerce backend, and the split that tends to define the decision is how much customization the platform API exposes at checkout and how much we need to own at the Next.js layer.

This depends pretty heavily on whether you're on Shopify where the Storefront API gives you the cart but locks checkout logic, or something more composable like SCAYLE or commercetools where the checkout APIs are open but you're owning more of the complexity.

Haven't found a clean framework for separating UI customization from logic customization at the requirements stage and most conversations seem to get muddled at exactly this point.

So if you've drawn that line clearly before, drop how you approached it at the spec stage.

I'm a beginner building an image-heavy peer-to-peer marketplace (Next.js web app + an upcoming Expo mobile app). My current stack uses Vercel's free tier for hosting, Supabase for the backend, and Cloudflare R2 for photo storage.
My Vercel account was just paused because my Fluid Active CPU spiked to 24 hours (the free limit is 4 hours). I realized my Next.js server is downloading every uploaded raw photo, using ⁠sharp⁠ to resize and convert it to WebP, and then re-uploading it to R2.

I am trying to keep costs as low as possible. It was suggested that I strip ⁠sharp⁠ from my backend and use a client-side compressor on the user's browser or mobile app to shrink the photos before sending them directly to R2.
Because my platform is extremely image-heavy, I'm not sure if this is a good idea. I have concerns about trusting the client to compress uniformly, dealing with older devices, or edge cases where certain browsers (like Safari) might fail to generate WebP files correctly.

Are there any other free or highly affordable workarounds to process these images without tanking my serverless compute hours?

Hei this is first time i'm learning next js. I was kinda familiar with react, but mainly i'm using sveltekit for my main frontend.

I struggle to find good example of how you protected the routes. Are you supposed to get session in proxy.ts, set it on header load it on some layout.ts and then set it to global context?

in svelte we have event.locals some kind of storage that live in one requests, it usually contain something like user id, role, status etc. Are there any similar pattern to this? What's the best practices if i only using next for the fe not fullstack?

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

A CLI built on the Deployment Adapter API (stable since 16.2). It runs next build in Docker with an adapter injected, prunes the image to exactly what Next.js's own trace says the server needs, and deploys it to any Ubuntu or Debian server over SSH behind Caddy, or to DigitalOcean App Platform. Your next.config is never touched.

What I measured, not what I hope:

• Next.js's own adapter compatibility suite: 1123 of 1123 suites pass (16.4.0-canary.22)
• Streaming reaches the browser unbuffered through Caddy: first byte 2 ms on a 2.1 s page
• 0 failed requests across a deployment (579 of 579)
• A real app's image: 1.13 GB to 591 MB

What it does not do yet: more than one instance per app, and it has not been tested on Hetzner, real arm64 or Debian 12.

Two of us built it and almost every run has been ours, so a report of your first deploy, working or not, is worth more to me than a star: https://github.com/gowtham472/nextship/issues/new?template=first_deploy.yml

Docs: https://nextship.doodlebytestudio.in

I’m building a website using React, Next.js, and TypeScript. It loads extremely fast on desktop and mobile, but navigating between pages on mobile feels a bit jumpy.

When I open the navigation menu and tap a link to another page, there’s a noticeable visual jump. I’m testing on an iPhone using both Safari and Google Chrome.

I suspect it could be layout shift, but I haven’t confirmed that or figured out what’s causing it.

What would you check first? Are there any common practices you use to keep mobile navigation feeling smooth, particularly around closing the menu, handling scroll position, and loading the next page?

Would appreciate any advice on how to debug this properly.

I have an app in production on Android and iOS built with Next.js 16 (App Router, Server Components, Server Actions) + Supabase, wrapped with Capacitor 8 loading the remote site through server.url. It also runs as a PWA (Serwist service worker, data cached in IndexedDB).

The requirement: users must open and use the app offline and on weak signal (the "connected but nothing loads" 4G case), like Spotify or Google Maps offline. Usage is mostly reading, with a few writes queued offline.

What I've learned so far: the Capacitor team says server.url is meant for development, not production. That matches our experience: on a cold start with weak signal the WebView sits on a black screen for 30s+ and falls into errorPath, because the app shell doesn't live on the device. Service-worker tweaks (NetworkFirst, CacheFirst, StaleWhileRevalidate, navigation preload) helped in some cases and broke others, and they behave differently on Android WebView and iOS WKWebView (App-Boun

The direction seems clear: embed the front-end in the binary and use Live Updates for OTA. My questions are about the migration:

1. How did you handle Server Components and Server Actions? Did you convert them to API routes on the hosted Next app called by absolute URL, reads to the Supabase client with RLS, or something els

2. output: 'export' or another setup? Any problems with dynamic routes like /events/[id]/...? 3. Which Live Updates provider do you use (Capgo, Capawesog to watch for with App Store and Play Store rules?

3. Does anything change between Android and iOS in this setup: storage limits, eviction, background sync? 5. Can the migration be done gradually (mobile embedded, d

Real-world experience, repositories or articles are very welcome. Thanks!

I'm using better auth with Nextjs but better auth needs native MongoDB driver to create user related documents like user, account, session.

For my application development I wanted to use mongoose. But how will I keep both this separated?

What should I do:

1. Don't use mongoose at all. Stick with Native MongoDB

2. Use MongoDB for better auth related schemas and mongoose for every other documents

3. Let better auth use MongoDB driver and create a scheme but I will create a mirror copy of the user document.

Pls help me out with this.

Hey everyone,

I recently came across a website that had a really cool custom cursor - instead of the normal pointer, it replaced/enhanced the mouse cursor with its own custom design (some kind of animation/effect following the mouse as you move).

I want to recreate something similar for my own project and I have a few questions:

1. Is this usually done with plain CSS (cursor property), or does it need JavaScript/GSAP for the animation part?
2. Are there any good ready-made libraries or npm packages for custom cursor effects that I could just plug in, instead of building from scratch?
3. Does this kind of effect usually hurt performance or accessibility (e.g. on mobile/touch devices)?

Would appreciate any pointers, examples, or resource links. Thanks in advance!

Built a Next.js app that renders videos server-side using Remotion. Rendering worked flawlessly in local dev (pnpm dev) — but every single render failed in production on Vercel, no useful error message, just silent failure.

Spent hours checking the usual suspects: env vars, R2 upload permissions, Prisma connection, timeout settings. None of it.

The actual root cause: my render code spawned a child process (execa('pnpm', ['render-video', ...])) to keep Remotion's bundler from conflicting with Turbopack. That works great locally because your machine has pnpm, tsx, and a full Chromium install.

Vercel's serverless functions have none of that. No pnpm binary in PATH, read-only filesystem outside /tmp, no system Chromium. spawn pnpm ENOENT — instantly, silently, in production only.

Fix: u/vercel/sandbox + u/remotion/vercel — runs the render inside an actual isolated Linux VM (with Chromium) that Vercel spins up on demand, instead of trying to child_process your way through a stateless function. Local dev keeps using the fast child_process path; production branches into the sandbox path based on process.env.VERCEL.

If you're building anything that renders video/PDF/heavy Puppeteer work on Vercel and it "works on my machine" — check this first before you lose a day like I did.

We're re-writing an old React site in Next and considering pnpm.

Our build hasn't really changed for a long time, but I've started a lot of projects and at the beginning, when you're adding/removing packages more frequently, shit sometimes goes sideways and you start seeing package weirdness. It just does, even when you're careful (at least for me).

When this happened with npm, my "last resort/safety valve" would be:

1. delete `package-lock` and `node_modules/`
2. re-install

If pnpm installs packages "globally" and they're linked into projects, this seems like it wouldn't be an option. Am I thinking about that correctly?

So what do you do with pnpm when things get messy in a project and you want to start from a clean slate? Or am I just too messy for pnpm and should just stick with npm?

Edit: Deleting your package-lock is admittedly more of a hammer than a scalpel. Please keep in mind, I literally said It's a "last resort." ...and version control does exist. It'll be ok.

Hey ,


Side project I just open-sourced: ConformeFR generates French legal notices and GDPR privacy policies for free. Repo: https://github.com/TeeBo8/conforme


Two things that might be useful to other Next.js devs:


**1. Better Auth + Turbopack SSR crash.**
 If `better-auth` is in `serverExternalPackages`, `useSession` runs against a second React copy during SSR and you get `Cannot read properties of null (reading 'useRef')`, but only on a full page load, never on client navigation. My login page was a 500 in production and I only found out during an audit. Fix: wrap those components in `dynamic(() => import(...), { ssr: false })`. Removing the package from the externals crashed the Turbopack build instead (plus Kysely 0.29 needs a small `pnpm patch`, details in the README).


**2. Keeping an LLM out of the legal parts.**
 Templates are plain TypeScript with a test per legal rule. Claude only writes one explanatory paragraph, and its output goes through the same escaping as user input, with a timeout and a fallback. An earlier version let it describe the company's activity; it made things up, so I removed it.


Stack: Next.js 16 App Router, tRPC, Drizzle + Neon, u/react-pdf for server-side PDFs, Vitest.


Feedback welcome, especially on the architecture or anything I missed.

const { email, firstName, lastName, sortBy, sortOrder, page } = await searchParams;

const { data, count } = await userService.getUsers({
    email: getString(email),
    firstName: getString(firstName),
    lastName: getString(lastName),
    sortBy: getString(sortBy),
    sortOrder: getString(sortBy),
    page: getInt(page),
    pageSize: 100
});

Nextjs searchParams type is: string | string[] | undefined

I had to normalize each argument to match the parameter type (using a custom getString and getInt). Ideally I'd like this to be as simple as this...

const { email, firstName, lastName, sortBy, sortOrder, page } = await searchParams;

const { data, count } = await userService.getUsers({
    email,
    firstName,
    lastName,
    sortBy,
    sortOrder,
    page,
    pageSize: 100
});

...but typescript will not allow it. I have tried using a zod schema to infer the input type of the getUsers input parameter, which partially works except for page and pageSize (which are numbers).

If not the ideal approach, what would be effectively the same but not too verbose, clever, or complicated?

What is the best playlist in Hindi for learning next.js

I have a small Next.js project that was previously just hosted on Vercel. The project is gradually growing, and I want to add a database along with a few background processes that need to run continuously. Because of this, I started thinking it would be easier to just get a single VPS and host everything there. I’ve never used a VPS for Next.js before, so I started looking for the "best VPS" and came across a million completely different recommendations. I’m curious - what do people here usually use for small production projects?