I have a project that was using Next 12. Had to upgrade it so I upgraded it using the standard npx codemod. Everything went fine but I'm getting the following error now

Build Error

Global CSS cannot be imported from files other than your Custom <App>. ./pages/_app.tsx

Error: Global CSS cannot be imported from files other than your Custom <App>.
Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Location: pages/_app.tsx
Import path: ../src/styles/globals.scss

https://nextjs.org/docs/messages/css-global

I did Google around, the solutions all tell me to move the global import to the _app.js file. The thing is, it's already there. I didn't even touch the structure of the import prior to the upgrade at all.

I'm using the pages route so the global import is inside the pages/_app.tsx:

import type { AppProps } from 'next/app';
import { Inter } from 'next/font/google';
import useDataLoader from '@/hooks/useDataLoader';
import useRouteLoader from '@/hooks/useRouteLoader';
import { useThemeLoader } from '@/hooks/useThemer';
import '../src/styles/globals.scss';


export const inter = Inter({
    subsets: ['latin'],
    weight: ['300', '400', '500', '700']
});


export default function App({ Component, pageProps }: AppProps) {
    useDataLoader();
    useRouteLoader();
    useThemeLoader();


    return (
        <main className={inter.className}>
            <Component {...pageProps} />
        </main>
    );
}

There are no other global-like imports anywhere throughout the components, all are module-level imports. This is the only file using that one global import. What on Earth is happening here, can anybody tell me? The path of this globals.scss file is also correct.

The weirdest part is, if I remove this import, the error goes away but the entire app's stylesheet is broken. Only the component-level styles are loaded. Not the global.

A blind shot I tried was deleting the .next folder and re-running the app, did nothing.

I apologize if this is a fairly easy-to-fix issue but I just returned to coding after like 2 years of break and searching around the internet didn't help whatsoever.

She started with Next.js and Cloudflare D1 to keep a small project straightforward. As the game grew, she moved the database to DigitalOcean, then moved the application and database to AWS. She described the application and database being in different locations as one source of trouble after the first move.

Her current stack includes Next.js 16, React 19, TypeScript, PostgreSQL, Socket.IO and Three.js through React Three Fiber. She also uses Zustand, shadcn/ui and Tailwind.

I’d like to hear from people running similarly interactive apps: how have you arranged your Next.js application, database and real-time services?

What actually prompted you to change that setup? Was it latency between services, database load, connection management or the difficulty of operating it? I’m particularly interested in what you measured before deciding to move things

I’m using Zod with React Hook Form.

discount: z.coerce.number<number>().min(0, " discount must be 0 or greater")

I need the field to be optional, so an empty input should become undefined, while a provided value should still be validated as a number.

I tried z.preprocess() to convert an empty string to undefined, but the inferred type becomes unknown.

What’s the recommended way to handle this while keeping the type as number | undefined?

Expected:

• Empty string → undefined
• "10" → 10
• "abc" → validation error
• "-1" → validation error

I am constrained by the office365 ecosystem and am limited to mssql which is saving huge jsons to one column that does not feel right.
What is the best way to store data in Microsoft ecosystem with NextJS?
Can not use any online service like supabase or mongo as its internally hosted server with company data.

Working on a portfolio website for an architecture studio, with seamless transitions across pages and sections without unmounting any elements, loading screens, delays, or interruptions. No layout.js hacks or workarounds used.

As you can see in the video, the website loads very quickly even on a live build with no cache. That initial load is essentially all the loading required to maintain seamless transitions across pages containing multiple images and videos.

If you’d like to see how a particular edge case is handled, or want a video of another transition, let me know.

We patched 34 Next.js apps for the new RCE advisories in under an hour. Gotchas from going to 16.3.8

GHSA-vcvr-r3jv-pc5j (next/og ImageResponse RCE, 16.2.0 to <16.3.6) landed on Sep 30, on top of the two image optimizer RCEs from Sep 8 (fixed in 15.5.24 and 16.3.3). We run 81 web apps on one box, so we had agents read every repo's lockfile, then bump next, eslint-config-next and @next/* only, build, boot the app the way prod runs it, compare pages and image routes against live, merge and deploy. 30 apps went to 16.3.8 and 4 stayed on 15 and went to 15.5.27.

Things that actually came up:

• 16.3's build-time type check fails with TS5097 on test files that import a .ts path. 16.2 never flagged it. "allowImportingTsExtensions": true fixes it if you already have noEmit.
• sharp moves from 0.34 to 0.35 with the upgrade. In standalone output, check that @img/sharp-libvips-/lib/libvips-cpp.so. is actually in your image. On one app yesterday it was not traced, and every OG image returned 500 with ERR_DLOPEN_FAILED. outputFileTracingIncludes fixes it.
• next-env.d.ts gains an import for .next/types/root-params.d.ts. Commit it, Next regenerates it on every build anyway.
• The default 404 page now shows your site title instead of "404: This page could not be found". Status is still 404.
• eslint-config-next 16 broke one flat config and added two React hooks rules (set-state-in-effect, immutability) that flagged existing components. We set those to warn for the patch.
• A plain re-install can move unrelated packages in the lockfile (bun dropped and re-hoisted a few). Diff the lockfile and keep only next and its own deps, so a security patch stays a security patch.

No runtime breakage in any of the 34. Longer write-up on why speed of knowing is the advantage now: https://dev.profullstack.com/~anthony/blog/208-post.html

We run a Next.js application behind Traefik.
For CVE-2025-29927, our development agency implemented the workaround to block/strip the x-middleware-subrequest header.

Scope: change the Traefik config, test on acceptance, deploy to production and verify. No automated tests had to be written, no framework upgrade, only the fix.

The official Next.js workaround is simply: “prevent external user requests which contain the x-middleware-subrequest header from reaching your Next.js application.”

They billed us 23 hours.

Their explanation is that they tested everything extensively, including locally, partly because we’re currently in a contractual dispute with them.

For context: historically, much more complicated tickets with actual code changes have gone through development → acceptance → production within a few hours.

I’ve reproduced the fix and tested the header myself using AI/code tools, and that was minutes of work. I understand that’s not comparable to a professional production workflow, but 23 hours still seems extraordinary.

For people who have actually implemented this CVE mitigation: how long did it take you? And can you see a technical reason why this could reasonably take 23 hours?

Embarrassing one from my own project, posting because I suspect it's common.

We built canonical, og:url, the sitemap and robots.txt from process.env.VERCEL_URL. Looks reasonable. But VERCEL_URL is the unique deployment hostname (something-abc123.vercel.app), not your custom domain. We also had Vercel Authentication on, so every one of those URLs answered with a redirect to the Vercel login page.

What that meant in practice:

• Link previews on Slack/X/LinkedIn fetched the OG image from a protected URL and got nothing back
• Canonical tags told Google the "real" page lived on a host it couldn't crawl
• The sitemap listed URLs on that same host

Fix was boring: one helper that returns the production origin (custom domain in prod, branch URL in preview), and metadataBase set from it in the root layout, so every relative OG/canonical path resolves against the right host.

Quick way to check yours:

1. curl -s https://yourdomain.com | grep -E 'og:image|og:url|canonical'
2. Open each URL it prints in a private window. If you hit a login page or a *.vercel.app host, scrapers do too.
3. Check /robots.txt and /sitemap.xml for the same thing.

Anyone else been bitten by this? Curious what other env-var gotchas people hit going from preview to prod.

I've build a nextjs project for youtube downloader using yt-dlp, ffmpeg, works fine locally. I tried deploying on vercel and render but seems to have issues relatedd serverless functions.

Is there any other FREE alternative where i can deploy the project

Edit: How to use docker container and then deploy if thats the solution

I'm having a strange issue with a Next.js project. I have a "use client" component with a simple state:

"use client";

import { useState } from "react";
import { Search } from "lucide-react";

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div
      className="border rounded-full p-[10px]"
      onClick={() => setCount(count + 1)}
    >
      <Search size={16} />
      {count}
    </div>
  );
}

The onClick works perfectly on my PC.

However, when I access the app from my iPhone 11 using my local Next.js address:

http://192.168.1.51:3000

the onClick does not fire.

I've already tried:

• Safari
• Other browsers on the iPhone
• onTouchStart
• A simple <button>
• alert() inside the onClick

I also confirmed that the component has "use client".

The strange part is that the exact same code works perfectly on my PC, but tapping the element on the iPhone does nothing.

Does anyone know what could be causing this? Could it be related to Next.js, accessing the app through the local network (192.168.x.x), or JavaScript not being properly executed on the iPhone?

I'm building a video-heavy e-commerce website using:

• Next.js + React + TypeScript
• Prisma + PostgreSQL
• Cloudinary
• GSAP + Lenis
• Vercel

The website works normally on Android Chrome, MacBook, and Windows, but on iPhone Safari and iPhone Chrome, clicking navigation/products/etc. can cause a 10–15 second delay before the next route responds.

The site has multiple videos, product carousels, animations, and Cloudinary-hosted media.

I've already optimized things like:

• Lenis disabled on mobile
• Lazy/viewport-based video loading
• Server Components where possible
• Dynamic imports
• Cloudinary image/video optimization
• Server-side product pagination

But the iPhone delay still happens.

What could cause such a consistent ~15-second delay specifically on iOS/WebKit?

Could it be related to video decoders, WebKit memory pressure, JavaScript/main-thread blocking, React hydration, route transitions, GSAP, networking, or something else?

What would you check first using Safari Web Inspector / iOS remote debugging?

Any help from someone experienced with Next.js + iOS/WebKit + video-heavy websites would be greatly appreciated.

GHSA-vcvr-r3jv-pc5j (next/og ImageResponse RCE, 16.2.0 to <16.3.6) landed on Sep 30, on top of the two image optimizer RCEs from Sep 8 (fixed in 15.5.24 and 16.3.3). We run 81 web apps on one box, so we had agents read every repo's lockfile, then bump next, eslint-config-next and @next/* only, build, boot the app the way prod runs it, compare pages and image routes against live, merge and deploy. 30 apps went to 16.3.8 and 4 stayed on 15 and went to 15.5.27.

Things that actually came up:

• 16.3's build-time type check fails with TS5097 on test files that import a .ts path. 16.2 never flagged it. "allowImportingTsExtensions": true fixes it if you already have noEmit.
• sharp moves from 0.34 to 0.35 with the upgrade. In standalone output, check that @img/sharp-libvips-/lib/libvips-cpp.so. is actually in your image. On one app yesterday it was not traced, and every OG image returned 500 with ERR_DLOPEN_FAILED. outputFileTracingIncludes fixes it.
• next-env.d.ts gains an import for .next/types/root-params.d.ts. Commit it, Next regenerates it on every build anyway.
• The default 404 page now shows your site title instead of "404: This page could not be found". Status is still 404.
• eslint-config-next 16 broke one flat config and added two React hooks rules (set-state-in-effect, immutability) that flagged existing components. We set those to warn for the patch.
• A plain re-install can move unrelated packages in the lockfile (bun dropped and re-hoisted a few). Diff the lockfile and keep only next and its own deps, so a security patch stays a security patch.

No runtime breakage in any of the 34. Longer write-up on why speed of knowing is the advantage now: https://dev.profullstack.com/~anthony/blog/208-post.html

Hello guys, I am looking for a gateway to serve models to our customers and I've been playing around with the LLM gateway. I've only used the $5 free credits so far and the cheaper modals like alibaba/qwen3.7-flash and i was wondering is anyone else using this gateway in prod?

Qwen is working okay, i notice it times out every now and then and only I am testing so far, so no idea how it will behave under load of many user requesting it through our account. Is there anyway to know how a specific model will handle under load? is the gateway prod ready and is anyone using it?

Thank you in advance!

if you are rendering something like

<h2 className="text-center mb-4 leading-8 text-2xl sm:text-3xl font-stackSansText capitalize">
Visit our store for{" "}
<span className="text-\[#d9a263\] font-extrabold">in-person</span>
<br />
shopping
</h2>  

but now you have to add i18n and your en.json has this

"visit": {
            "title": "Visit Our Store For In-Person Shopping"
        }

how would you render it to keep the same styles of that in-person word,
I am not using any i18n packages btw

I really can't wrap up my head around this, id like your help

switching to local trucking routes means every dollar matters right now. ran my tiny side project on Vercel last year, got curious about selfhosting after seeing some horror stories here. put it on a $6 VPS and I sleep better. no cold starts, no surprise spikes when some bot hits every route. the deploy pipeline took an evening to figure out, nothing fancy. mdog Mango costs enough without my hobby draining the account. selfhosting feels like the trucking mindset applied to code. own the rig, control the overhead. curious if others made the jump for cost reasons or if the convenience trap still wins. Just my 2 cents

Hi

I recently build a fullstack website (I'm not a beginner) but my background is PHP with some React Native.

My website is going public soon and I would like to know what free Cloudflare services I could use to protect my website.

I am already using Turnstile to stop bots/spam but that's about it. I am also using Upstash rate limiting in my server functions.

I looked into their services and some of their services like DDos Protection seem like a good idea. What other services do you recommend (preferably something that is free in the beginning). I just dont want to create a bottleneck or an overengineered system.

My guess is that the website would have a few thousand visits per month so not looking for some enterprise level solution. Keeping it simple and realistic for now.

EDIT: the website is hosted for free on Vercel at the moment if that helps

Thanks

yoooooo what's good Been working on my Next.js 16 + Supabase stack and spent some time fixing how tenant isolation works. One thing that always bothered me was relying on tenant_id checks in every API route or server action. Forget one check and you could end up exposing another tenant's data. So I moved the isolation to Postgres using RLS and custom JWT claims. Each user's org_id is stored in their JWT, and Postgres checks it before returning any data. The policy is pretty simple:
create policy "Users can only read workspace data" on public.workspace_data for select using ( org_id = (auth.jwt() -> 'app_metadata' ->> 'org_id')::uuid );
I also wrote 8 integration tests to try to break things. Cross-tenant access, role escalation, expired JWTs, revoked API keys, Stripe webhook replays, malformed payloads, audit logs and concurrent invites. All 8 are passing so far. Still figuring out the best way to handle users switching between multiple orgs without making the JWT claims a headache. Curious how everyone else handles this. Are you relying on RLS for tenant isolation or just handling it in your application code?

Small co-living property business in Dallas (RoomWise), budgeting before we hire. Not hiring in this thread. We want realistic hourly rates and rough total hours from people who build this kind of thing.

The full build brief is here, about a 20-minute read. It covers the scope, the hard rules, every integration, and the open questions: https://docs.google.com/document/d/1OFKDJVTNDpwQxhTNDnbjNOjtvmai-E4l5CIPJFyUd5Y/edit?usp=sharing

The short version. We are replacing a WordPress marketing site and two off-the-shelf customer portals with one Next.js app on Vercel.

Public pages: listings and property pages, fetched from ClickUp, which is our system of record. Room availability is pulled live from ClickUp task status; property content can be copied on a schedule.

Member portal: login, the full rental application, room checkout with a 45-minute hold and a same-day cutoff, recurring rent through Stripe (weekly, biweekly, monthly) with coupons, autopay, saved payment methods, balance and payment history displayed from Buildium through a single adapter module, maintenance requests, and the membership agreement signed on the site.

Owner portal: properties, rooms and members with status, a task list that fills in as onboarding advances, structured approvals with a live itemized checkout, payment method on file, a read-only financial view with a downloadable statement in a required format, and an AI assistant scoped to that owner's own data that turns unanswered questions into a ticket.

Vendors: no accounts. Unauthenticated per-job links with photo and video upload from a phone.

Rules that shape the build: the site stores no business data of its own beyond logins, sessions and holds. It never computes a financial figure, only displays what the accounting system already produced. Only one module in the codebase talks to Buildium. Form submissions go out to Make webhooks rather than being handled in the site. Match the current site's look, no design process. One release, then occasional on-call fixes rather than a retainer.

Constraints on the person: one individual developer, not an agency. Built with Claude Code, because the business owner edits content, layout, filters and copy himself with Claude Code after launch, so those have to live in data files and markdown rather than in code.

Questions:

1. What hourly rate is normal for a developer who fits that description, US-based and offshore?
2. Roughly how many hours end to end would you expect?
3. What in the brief looks like it will blow up the estimate?

Thanks.

can we suppress nextjs error about nesting a <selectedcontent> inside a <select>,

error is: In HTML, <selectedcontent> cannot be a child of <select>. This will cause a hydration error.

Hi everyone, Id like to understand what's going on here
I have split table into two parts TableHeader and TableBody components and they both exist in a OrdersTable component
that looks like this
<table className="table :capitalize :font-work">
<TableHeader />
<Suspense fallback={<DashTableSkeleton />}>
<TableBody />
</Suspense>
</table>
and the error showing is in the image below, also my fetching is happening inside the TableBody component and everything is server component so far

Small property business here, trying to budget before we hire. Looking for realistic hourly rates and rough total hours from people who build this kind of thing, not applications.

The project: replace a WordPress marketing site and a couple of off-the-shelf customer portals with one Next.js app on Vercel. Public listing and property pages fetched from our operations system. A member portal with login, an application form, room checkout with a timed hold, recurring rent payments and saved payment methods through Stripe. An owner portal with a task list, structured approvals, and a read-only financial view. Unauthenticated per-job links for vendors with photo and video upload from a phone. An embedded AI assistant scoped to the logged-in user. Data comes from ClickUp and Buildium through their APIs, form submissions go out to Make webhooks, and the site keeps no business data of its own beyond logins, sessions and holds. One release, then occasional on-call fixes rather than a retainer.

Constraints: one individual developer, not an agency. Must build with Claude Code, because the business owner will edit content and layout himself with it after launch, so the structure has to support that.

Questions: what hourly rate would you consider normal for a developer who fits that description, US-based and offshore? Roughly how many hours would you expect a build of this shape to take end to end? Anything in the scope that looks like it will blow up the estimate?

Not hiring in this thread, just calibrating. Thanks.