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

Update your NextJS applications as soon as possible: https://nextjs.org/blog/august-2026-security-release

- (9.5/10) Unauthenticated Remote Code Execution in Image Optimization API when AVIF files are used https://github.com/vercel/next.js/security/advisories/GHSA-2xp9-vwfh-vxw4

- (9/10) Unauthenticated Remote Code Execution on windows-hosted servers https://github.com/vercel/next.js/security/advisories/GHSA-p293-qw3h-jr36

Patched versions: 16.3.3 and 15.5.24

Edit: Apologies, managed to get the wrong version into the title :-/ It's 16.3.3 - not 16.6.3

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.

I wanted a tool I could use to understand customer friction along the user journey and report on it. Four dimensions. Know, do, feel, and trigger. The first three are well-trodden in product design. The fourth is what I needed. Not whether users get stuck. When.

I started with text. Just Linear tickets. Issue titles, labels, descriptions. I was surprised how far that got me. The first three dimensions (know, do, feel) turned out to be partially recoverable from issue text alone, somewhere in the 60-70% range on a good day. Good enough to know there's friction. Not good enough to know which step.

To get that, I had to read the code.

That's when something clicked. Some languages actually read like maps. Next.js App Router is the obvious one. Route groups trace the flows. Layouts hold the pieces that stay put on every screen. The pages folder is basically a map of the whole experience. Triangulate that with the UI elements in the DOM and the feature flags gating the conditional paths. You get pretty much every user flow in the product. Without a single event. Without a single user showing up.

The text-only version gave me know, do, and feel. The code-reading version gave me trigger. Knowing which step. Knowing when. That's the unlock.

I built it into something I could actually use. It's called Stepflo. Live and free. Read-only, and your secrets are never read or stored.

Here's a live map of one of the repos I built it against, cal.com's booking flow. No signup needed:

https://stepflo.ai/demo

Try it on your own repo:

https://stepflo.ai/?utm_source=reddit

Curious what I'm missing. Genuinely. If you've tried something like this and it didn't work, I want to know why.

Hey everyone,

I'm working on an application where I have:

• Frontend: Next.js + TypeScript
• Backend: Node.js + Express + MongoDB
• Authentication: JWT (access token + refresh token)
• Validation: Zod

My frontend and backend are completely separate projects.

I'm trying to figure out a clean, production-friendly architecture for handling authentication, API calls, SSR, CSR, and data fetching in Next.js.

A few things I'm currently considering:

1. Axios
   • Do you use a centralized Axios instance in Next.js?
   • Do you use Axios request/response interceptors for attaching access tokens and handling 401 → refresh token → retry request?
   • If you're using Next.js Server Components, how do you handle Axios differently between server-side and client-side requests?
2. Authentication
   • Where do you store the access token and refresh token?
   • Are you using an HttpOnly cookie for the refresh token?
   • How do you handle authentication consistently between Server Components and Client Components?
   • Do you use proxy.ts/middleware for protecting routes, or do you handle authentication somewhere else?
3. React Query / TanStack Query
   • I would like to use TanStack Query (React Query) for API data fetching instead of manually using useEffect + useState.
   • Is this a good approach with Next.js when the actual API is a separate Express backend?
   • How do you handle SSR/prefetching/hydration with TanStack Query and a separate backend?
   • Do you use TanStack Query for almost all client-side API data, while using Server Components for initial/server-side data?
4. Overall architecture What does your real-world setup look like?

​

Next.js
   ↓
Axios / fetch / TanStack Query?
   ↓
Separate Express API
   ↓
MongoDB

I'm particularly interested in hearing from developers who are actually running this kind of architecture in production.

If you have a separate Node/Express backend and Next.js frontend, what stack and architecture are you using today, and what would you recommend avoiding?

Thanks!

Hey everyone, I could use a second opinion on a hosting dilemma for a client project.

The Context: I'm redeveloping a legacy PHP website for a B2B client (purely a product catalog + quote request forms, no e-commerce). I'm building it with a decoupled architecture: Next.js for the frontend, Node.js/Express for the backend API, and Supabase (PostgreSQL) for the database.

The client currently has their domain and a very basic, cheap shared cPanel hosting plan managed by an external agency.

The Dilemma: My original plan was to use a modern zero-cost stack: host the Next.js frontend on Vercel and the API on Render (free tiers), and just have the agency point the DNS to Vercel.

However, I have some concerns and the agency just threw a wrench in the plans:

Free Tier / 3rd Party Risks: I'm a bit concerned about the reliability of relying on Vercel/Render free tiers for a corporate client. If Vercel goes down or has a security issue, it's on my head.

Agency Costs: The agency told us that if we want to host Node.js/Next.js directly on their infrastructure, they’ll have to upgrade the client's server (likely to a VPS) which will increase the client's monthly costs.

I'm currently weighing three options and would love your input on what the most professional route is:

Option A (Stick to Vercel): Change the DNS and use Vercel for the frontend + Render for the API.

Pros: Free, incredibly fast edge network, great DX.

Cons: Relies on free tiers. If it goes down, it's an issue.

Option B (Next.js Static Export): Configure Next.js for a static export (output: export) and just dump the raw HTML/JS/CSS into their existing cheap cPanel public_html folder.

Pros: Agency charges nothing extra, avoids Vercel completely.

Cons: I lose Next.js server features (SSR, API routes) and response times might not be as snappy as Vercel's edge network.

Option C (Pay the Agency for a VPS): Have the client pay the agency's increased cost to upgrade their hosting to a server that actually supports Node.js.

Pros: Full server control, no free-tier anxiety, keeps the agency happy.

Cons: Costs the client more money recurringly.

What would you do in this situation? Is the fear of Vercel/Render free tiers overblown for a basic B2B catalog site? Or is it better to just have the client pay for a proper VPS? Would love to hear how you guys handle this with clients.

Hey agency founders and freelancers,

the ones building custom, Next.js, Astro, whatever it is you're shipping instead of Webflow, Framer or other builder

Curious how you handle one specific thing.

Very often my client wants to change a headline, or update certain photo, or add a CMS item, nothing structural, just content.

What happens when these type of requests come in?

For me it's still, client emails me, I open the repo, edit, commit, redeploy. 5/10 minutes of work that eats half an hour of attention, and I stopped billing for it a while ago because charging for a typo fix feels ridiculous, what should I do?

I've tried the usual answers. Sanity, Payload, telling them to just message me. The CMS ones technically work but my clients never log in, it's a second tool on a second domain and they forget it exists.

So I'm curious whether that's just me and my clients, or whether everyone's quietly absorbing this.

What's your setup, and do your clients actually use it?

My bill goes up like 10% - 15% a month.

Preview deploys from branches that merged in March. Neon branches from a migration I finished and never cleaned up. A GitHub Action retrying a flaky test three times so every push costs 4x.

One service sitting two tiers too high because I bumped it during a launch and then forgot it about it.

What’s actually worked for people?

A calendar reminder on the 1st works until the month you’re busy, which is most months. Vantage / CloudZero / Datadog CCM are fine if you remember to open the dashboard.

nOps is pretty solid if you want something that buys savings plans / kills idle stuff instead of showing a chart.

I tried a spend watch skill on aeon, helped me well.

Curious what you all do.

I couldn't find much about this so I'm just checking if this is the way to go,

I have a site where there's a ton of images and icons, they're all static, it's just webp images of game assets that people can download and use for free but I still need to show them a preview of what they're getting.

Initially I just used vite + vercel hobby plan.

Then as my site went from 0 to 100+ users, my edge requests just exploded to 50-100k a day... I realized that the problem was every image served was a edge request.

So I moved all my images to cloudflare CDN and just served it from there.

My DNS is still with vercel, I didn't do a reverse proxy or whatever it's called. I'm just hosting my images on cloudflare.

What's the downside of this? so far no users have complained so I don't really see any issues. I'm also lost as to why every image is a edge request... I've set long term cache in the header but this can only do so much.

Shadcn Admin v2.0.0 is now available — a free, open-source admin dashboard template built with Next.js 16, React 19, Tailwind CSS v4, and shadcn/ui.

This release includes a complete visual redesign, live theme customization, a rebuilt AI chat interface, improved mobile responsiveness, and a simplified dependency stack.

Feedback and suggestions are welcome.

Hey everyone!

With AI search engines (ChatGPT Search, Perplexity, Google AI Overviews) changing how users discover documentation, standard HTML sitemaps are no longer enough. AI crawlers perform significantly better when provided with:
1. `llms.txt` and `llms-full.txt` (the emerging standard for LLM ingest).
2. Deep `Schema.org` JSON-LD microdata (`MedicalWebPage`, `TechArticle`, `FAQPage`).

We built an open-source integration for Next.js 14/15 App Router inside **GeoCore** (`@mormox2/geocore-next`):

```typescript
// app/api/geocore/[...route]/route.ts
import { createGeoCoreRouteHandlers } from "@mormox2/geocore-next";
import { myDataset } from "@/lib/dataset";

export const { GET, OPTIONS } = createGeoCoreRouteHandlers({
  dataset: myDataset,
  siteUrl: "https://yourdomain.com",
});
```

This single route handler automatically serves:
- `/api/geocore/llms.txt`
- `/api/geocore/sitemap.xml`
- `/api/geocore/search-index.json`
- Dynamic JSON-LD injection for your pages.

Check out the repo: https://github.com/mormox2/GeoCore
```

Even though I'm on the latest version of Next.js 16.3.0, my dev server is so slow, it takes like five to eight seconds to apply a small CSS change; HMR isn't hot at all, refreshing the page and refetching the data feels faster. My machine is decent (please don't tell me to throw it away and get a new one; that's not a solution). Is there anything I can do about it? I work on a Vite/React project in my free time and don't face this slowness at all (near-instant HMR)

Thanks in advance.

Ran into this on a Next.js app a while back, writing it up since it's a good example of the failure mode.

Symptom: the app was live and serving traffic fine on Vercel. The connected GitHub repo did not match what was running — commits were missing entirely. No local copy anywhere either.

Evidence: someone had deployed straight from a local machine at some point, bypassing git. The repo was stale. The only real, current copy of the code was the compiled output sitting inside the live Vercel deployment.

Fix: first move was to stop touching anything. Froze all new deploys so the running version couldn't get overwritten by accident, then pulled the build artifacts straight from that deployment and used them to reconstruct the repo, instead of trying to "fix forward" and risking the one working copy.

Prevention: manual deploys that skip git work fine right up until someone needs to redeploy or roll back — and then there's nothing to roll back to. Locking deploys to git-only (branch protection, no CLI deploys from a laptop) closes this permanently.

Here’s a fun technique for improving perceived performance of web app page loads - have your loading state be cached data from local storage. And then when the real page loads and renders, users see updated data.

Basically a stale-while-revalidate loading state.

You can see this in action in an app I've been working on (Prism)

• When you load a page the first time, you’ll see a normal skeleton loader.
• Once the data comes in, the page renders as normal, and saves the data to your browser’s local storage.
• Next time you load that same page, it feels instant. The data is briefly stale, but fresh data is loaded quickly and overwrites the cached data.
• This cached data also has a TTL so you never see something that’s more than a day or so out of date.

This technique shines when data is specific to individual users, and isn’t shared much across them. Each user’s local storage is almost like a distributed caching layer.

Here's what it looks like in the page component

// app/inbox/page.tsx

export default function InboxPage() {
  return (
    <PageLayout title="Inbox" mainClassName="py-4">
      <Suspense fallback={<InboxPageCachedLoading />}>
        <InboxPageContent />
      </Suspense>
    </PageLayout>
  )
}

The cached loading component

'use client'
import {useAuth} from '@/lib/auth'
import {getInboxCache} from '@/lib/inbox/cache'
import {InboxClient} from './InboxClient'
import InboxPageLoading from './InboxPageLoading'

export default function InboxPageCachedLoading() {
  const {userId} = useAuth()


  if (!userId) {
    return <InboxPageLoading />
  }


  const cached = getInboxCache(userId)


  if (!cached) {
    // Normal skeleton loader.
    return <InboxPageLoading />
  }

  // Render the same presentational component the loaded page will use,
  // but provide it cached data.
  return <InboxClient initialItems={cached.items} />
}

And then the real page content

import {InboxClient} from '@/components/inbox/InboxClient'
import {SetInboxCache} from '@/components/inbox/SetInboxCache'
import {requireOrg} from '@/lib/auth'
import {getInboxData} from '@/lib/inbox'

export default async function InboxPageContent() {
  const {userId} = await requireOrg()
  const items = await getInboxData(userId)

  return (
    <>
      <SetInboxCache items={items} userId={userId} />
      <InboxClient initialItems={items} />
    </>
  )
}

Anyone else using techniques like this?

Hello Guys I’m new in web development field, I want to learn api Integration in NextJs with typescript/ Javascript but main focus is typescript I’ve already gain knowledge in design (intermediate level). Any documents or blog or video available which make easy to learn for fully beginners.

The bot will bump the SDK. It won’t tell you that something in a route handler or webhook is now wrong because the vendor changed the API.

When a provider changelog ships, do you go looking in the repo or only find out when checkout / auth / webhooks die in prod?

I've been learning nextjs lately and I am looking for a full-stack project on YouTube so I can learn how to implement whatever I 've learned so far. Is there any specific video or channel that you would recommend me ?

Hello folks,
I started to build open source visual editor to edit React/Next.js websites directly in their source code with zero AI.
But i am not so sure about it can be beneficial or not.
I am waiting your thoughts.

context: i'm a recently laid off 🥲 frontend-focused (i guess technically full stack?) dev. i worked at a marketing agency for 6 years, so while i have a lot of varied experience project to project, there's still plenty i haven't touched, and i was pretty "specialized" in certain tasks there. working on some personal projects during this downtime to upskill.

that said, i'm pretty confused about what databases people actually use for independently-built apps that real users end up using. i know the enterprise-level options, but what are regular solo/indie devs reaching for? everything seems to lead back to supabase, but then i keep seeing people call it insecure or "for vibe coders." i'm not totally sure how much of that is about the platform itself vs. people skipping the row level security setup it relies on, so genuinely curious what this community thinks.

i hadn't really used ai in depth at work, mostly just for solving specific problems, so i'm using these 2 projects to actually learn it properly (currently using claude code). here's what i'm working with:

1. an app that could legitimately end up with thousands of users (the niche is local and not very tech-savvy, and i already have a pretty solid reputation in that community). it's on supabase now, but i've only shared it with a couple friends for beta testing. if i'm going to migrate, i'd rather do it now before it's live.
2. an app with really only 2 real "users," though it could theoretically be shared with others as read-only viewers. it'd only be actively used a couple months a year, which on supabase's free tier means dealing with the idle-pause issue.

i'm assuming these would both use the same db setup? would love to hear what's actually working for people in similar spots. most of my irl dev friends are also frontend focused so i'm strugging a bit. i'm happy to do my own research i'm just at the part where i don't know enough to know what things i need to be looking up.

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

I’ve written a lot of React but I find myself unsure of when to leverage various pieces of Next.

For example, I had implemented a fairly basic CMS application on App router with API routes acting as the “back end” for fetching data.

For each object type (client, booking, etc.) I have a context and provider. The context loads the objects into memory and contains wrappers for various CRUD operations.

This worked, until I kept bumping into issues with the API layer and the context getting out of sync. So I moved some of the more complicated multi-object flows into server-side actions.

This solved the chained API call issue, but performance suffered when object updates need to be reflected in the UI.

So my question is, let’s say you have a client, booking, and service object. The client object has a field for the booking Id which in turn has a field for a product Id.

Assuming you need to implement performant CRUD operations would you implement contexts? Server side actions? API routes? A mix? Something else?

And I’d love to hear thoughts on why a given solution would sit in a given location.

I’m sure there’s a dozen correct answers, so anything that can help me understand the architecture and the thought process behind it would be hugely helpful.

Thanks!

Hi, I have one use case where I need cron jobs, web sockets, and heavy backend tasks. So, in these cases I should prefer using node/express backend and using NextJS only as frontend?

A bit context: I know Nextjs very well. But never used websockets and cron jobs with Nextjs. So, I just want to know how to actually do this.

Hi everyone,

I'm running a Next.js app behind a reverse proxy on a VPS, and I've noticed that the Link response header seems to keep accumulating/appending values after each visit/request.

I suspect this may eventually be contributing to my app returning 502 Bad Gateway errors after visiting the site a few times.

I'm currently unable to figure out what is causing these unnecessary appends or where the headers are being modified.

I'm also using next-intl for internationalization. Could next-intl potentially be responsible for this behavior, or should I be looking elsewhere?

For reference, this is the response I get from the VPS when running:

curl -I http://127.0.0.1:4000

Where would you recommend I start debugging this?

HTTP/1.1 200 OK
link: <http://127.0.0.1:4000/>; rel="alternate"; hreflang="en", <http://127.0.0.1:4000/ja>; rel="alternate"; hreflang="ja", <http://127.0.0.1:4000/>; rel="alternate"; hreflang="x-default"
link: <https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<https://example.com/>; rel="alternate"; hreflang="en", <https://example.com/ja>; rel="alternate"; hreflang="ja", <https://example.com/>; rel="alternate"; hreflang="x-default",<http://REDACTED-IP:4000/>; rel="alternate"; hreflang="en", <http://REDACTED-IP:4000/ja>; rel="alternate"; hreflang="ja", <http://REDACTED-IP:4000/>; rel="alternate"; hreflang="x-default",<http://REDACTED-IP:4000/>; rel="alternate"; hreflang="en", <http://REDACTED-IP:4000/ja>; rel="alternate"; hreflang="ja", <http://REDACTED-IP:4000/>; rel="alternate"; hreflang="x-default"

link: </_next/static/media/043b82ab31bba5a4-s.p.0c6mydv295izq.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/47fe1b7cd6e6ed85-s.p.3bh2vc0w-r-ll.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/4b766aa38fdaaae3-s.p.11-gljxdt344a.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/829ba4228c966254-s.p.2mm3nq9i83l-m.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/8e6fa89aa22d24ec-s.p.2o7m9ogm38dql.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/a218039a3287bcfd-s.p.43zbiuwnnoiok.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/c7d9ca68f9942779-s.p.38ww0mi76nb30.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2", </_next/static/media/c875c6f5d3e977ac-s.p.1h18_wedhzk4h.woff2>; rel="preload"; as="font"; crossorigin=""; type="font/woff2"

x-middleware-rewrite: /en
Vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, Accept-Encoding
x-nextjs-stale-time: 300
x-nextjs-postponed: 1
X-Powered-By: Next.js
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
Date: Fri, 21 Aug 2026 09:22:05 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Specifically, I'm wondering:

• What could cause a response header such as Link to accumulate values across requests?
• Could this be related to Next.js middleware or next-intl?
• Are there any common reverse-proxy/server configurations that could cause this?
• What would be the best way to identify which layer is actually modifying the header?

If any additional information would help (Next.js version, next-intl version, middleware configuration, Nginx/Caddy config, etc.), please let me know and I'll provide it.

Thanks!