42,166 questions
0
votes
0
answers
36
views
loading.tsx and React Suspense are not triggered for _rsc requests in Next.js 15.2.1
I'm using Next.js 15.2.1 with the App Router.
I noticed that when I navigate to a page, my loading.tsx file is not triggered, and neither is React Suspense, if the page makes an _rsc request.
For ...
- 1
1
vote
0
answers
85
views
Attempted import error: 'dbAdmin' is not exported from '@/lib/firebase/admin' (imported as 'dbAdmin')
How do I properly initialize the Firebase Admin SDK with environment variables in Next.js / Node.js?
I'm trying to initialize the Firebase Admin SDK in a Next.js project using the environment ...
- 11
1
vote
0
answers
63
views
performance optimization in NextJS
I have 10k+ lines of global CSS in a NextJS project. Does this affect the LCP, as in mobile? I have tried a lot of optimizations, like adding priority for LCP images, adding lazy loading for other ...
- 1
0
votes
0
answers
54
views
To create a modal using intercepting routes and intercepting routes, should i use createPortal function or do it the basic way?
I'm trying to create a modal using intercepting routes and parallel routing, and am confused if i should go with the basic way or use create portal function. The code looks something like this if i ...
- 31
0
votes
0
answers
57
views
Importing a module federated web component inside a Next.js app
I'm a newbie to Next.js and module federation, and I'm working on an exercise (let's call it that) where I have a web component bundled with Webpack 5 in a federated module, and I want to import it ...
- 73
0
votes
0
answers
20
views
React Query Cache Not Updating After File Upload - Manual Invalidation Required
Problem
After uploading new trade files through an "Upload New File" dialog, the trade reconciliation table shows stale data from the previous upload instead of the updated data. The table ...
- 35
0
votes
0
answers
23
views
App configuration for static nextjs export
We currently have a nextjs app with a server that doesn't do much. We basically have a bunch of static pages and the server just reads environment variable to configure the app.
We would like to ...
- 10.6k
1
vote
1
answer
100
views
Firebase Admin SDK db object is invalid in Vercel API Route ("Expected first argument to collection...")
I have a Next.js application on Vercel. My API route fails when calling Firestore's doc() function, but only when deployed to Vercel or when running the production build locally. The dev server (npm ...
0
votes
1
answer
47
views
Is there a way to trigger error.tsx from layout component in nextjs?
I have a layout like this:
export default async function ClientLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<Header />...
- 75
0
votes
1
answer
144
views
How to implement auth in Supabase without mixing server actions and client actions?
I am using Supabase and NextJS in my app to implement authentication but the majority of my auth actions are server side with the exception being the sign-out action as the Supabase docs advise using ...
- 92
0
votes
1
answer
56
views
Next.js 14 App Router: Page works fine after restart, but product filters cause timeout after leaving app idle
I'm building an e-commerce site with Next.js 14 (App Router) and React 18.
Website: https://parfumedeparis.az
The issue
The problem happens only on this page:
https://parfumedeparis.az/az/store?page=...
- 449
0
votes
0
answers
44
views
Vercel deployment of Next.js app with custom 'rewrites' in vercel.json results in 404 errors on all routes
I have a monorepo project with a Flask backend (deployed separately) and a Next.js frontend located in a frontend directory. I'm trying to deploy only the frontend on Vercel.
Project Structure:
text
...
- 45
0
votes
1
answer
76
views
next.js Request Memoization caching doesn't work
this is my layout:
export default async function ClientLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<Header />
...
- 75
1
vote
1
answer
76
views
Next.js host based rewrite did not trigger on the root path
I want my subdomain sub.example.com to render the page example.com/brand without changing the URL.
Examples
sub.example.com/ should render example.com/brand
sub.example.com/work should render example....
- 604
1
vote
0
answers
129
views
Next.js error: Cannot read properties of null (reading 'parentNode')
I'm getting this error in NextJS (15.3.4) randomly while in dev mode, it often occurs when navigating from one page to another, but I can't seem to reproduce consistently. It seems like an issue with ...
- 33
2
votes
0
answers
144
views
Unable to run Inngest dev server using Bun (inngest-cli not recognized)
According to the official Inngest documentation, I’m setting up Inngest with a Next.js App Router project using the Bun runtime. I followed the installation steps exactly as described.
However, when I ...
- 43
0
votes
0
answers
36
views
Need help setting headers for ERPNEXT API endpoint
I have a next.js app that sends a delete request to the ERPNext backend from the next.js application.
The issue occurs on production only (i.e. the deployed next.js app) but works flawlessly on local. ...
- 15
1
vote
1
answer
404
views
Permission denied despite correct RLS, as supabase.auth.getUser() returns null on server
I'm building a Next.js 14 (App Router) application using Clerk for authentication and Supabase for the database. Despite following the latest integration guides, I'm stuck on a persistent 42501 ...
- 153
0
votes
1
answer
223
views
How to handle feature and permission-based authorization in Next.js without delaying initial render?
I’m building a multi-tenant SaaS application with Django Ninja as the backend and Next.js as the frontend. I’m running into a problem around handling RBAC permissions and org-level feature ...
- 37
0
votes
1
answer
80
views
Create two independent layouts in Next.js
I have completely different layouts for static pages, auth pages (login, signup), and dashboard. I use the app router, and Next v15.
When I was working on an old project using Next v14. I remember ...
0
votes
0
answers
48
views
webpack aliasing fails in NextJS + ts app
While working on a modular Next.js-13 app, I ran into one persistent challenge: plugin-based component overrides.
The Setup
We structured the app like this:
/components/singleNews
/plugins/social-...
- 428
0
votes
1
answer
287
views
How to package a standalone Tailwind v4 component (with tsup) without conflicting with host app styles?
I’m creating a reusable component library with tsup to share common UI elements across my Next.js projects (for example, a Footer).
The Footer works fine in my base app. But when I publish it as an ...
2
votes
1
answer
188
views
How do I distinguish between query and mutation in runtime?
I'm using Typescript 5, Next.js 15, tRPC 11, React Query 5 and React 19.
How can I programmatically differentiate between DecoratedMutation<...> and DecoratedQuery<...>?
I have tried:
...
- 344
0
votes
0
answers
69
views
How to load environment variables in Next.js 14 (App Router) with server and client components?
I am using Nextjs 14 with the app router and I have some environment variables in my .env.local file:
NEXT_PUBLIC_API_URL=https://myapi.com
SECRET_KEY=mySecret
Inside my app, I need to access them:
//...
0
votes
0
answers
65
views
NextJs + tRPC with Nginx as reverse proxy - duplicate header Transfer-Encoding: chunked
tRPC when used on client side with .useMutation() hook sends duplicate Transfer-Encoding: chunked header
Link to reproduction:
https://github.com/DownDev/trpc-bug
To reproduce
run using: docker ...
- 1
0
votes
1
answer
67
views
Next.js ISR + revalidateTag wasn’t updating data from WordPress (Pods). Turned out LightSpeedCache was caching REST JSON for anonymous requests
I had a Next.js page that fetches content from WordPress (Pods) and caches it for 5 minutes:
// helper
const data = await wpFetch<Content[]>(
process.env.WP_PAGE_CONTENT_URL!,
{ revalidate: ...
- 604
0
votes
0
answers
59
views
Problems with Oauth2 authentication in Firebase Console
I know nothing about code. I have been using the Firebase Console AI to help me build a website. I'm amazed it's working out to be honest, but I have hit a wall. For reasons specific to the app I am ...
0
votes
1
answer
245
views
Getting Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again
This is the error it's giving when I run npm run build:
ml@M-----MacBook-Air skyfold.dev % npm run build
> [email protected] build
> next build
▲ Next.js 15.4.6
- Environments: .env
...
- 1
0
votes
1
answer
36
views
ag-charts-react not working with nextjs v15
I am trying to get ag-charts to work with nextjs v15 using ag-charts-react. This works without any issues using react.
Working Example with React
However when i try to get this working inside a nextjs ...
- 28.2k
1
vote
1
answer
294
views
Supabase Error: "AuthApiError: Request rate limit reached"
I've been working on a project on Next.js 14.1 using Supabase.
I also use Supabase Auth for session and cookies storage. There is an error that happens really often and I haven't found a real solution ...
0
votes
0
answers
62
views
How to universally exclude staging and local env data in GA4?
I'm working on a Next.js project and have a GA4 property set up to track my website's performance. The main issue is that my GA4 dashboard is collecting traffic data from my local development and ...
0
votes
1
answer
127
views
Next-Auth: JWT callback returns large token → split into .0, .1, .2 cookies
I’m using next-auth with the JWT session strategy and running into a problem with cookie size when storing multiple API tokens.
Here’s my JWT callback:
async jwt({ token, user }) {
if (user) {
...
- 1
1
vote
0
answers
91
views
Why does Next.js middleware matcher fail with dynamic imports from a constants file?
I'm trying to use a centralized NAV_LINKS constant to define my protected routes for a Next.js middleware. The goal is to avoid repeating the route paths in both my component and the middleware config....
- 39
1
vote
1
answer
164
views
Tailwind CSS and DaisyUI UI bug in Production [closed]
The layout and design is different in production mode and some components are not visible even though they are there in dev mode and when I npm build, as well as when I inspect them on browser.
...
- 53
1
vote
2
answers
121
views
Cursor design change not working in divs or buttons [closed]
I am trying to use the cursor utility, my code is as following:
<button className="border-8 cursor-pointer bg-primary w-max flex gap-2 text-white py-4 px-6 text-2xl font-semibold">
...
0
votes
0
answers
23
views
Vercel deployment fails due to typecheck for Chakra-UI custom recipe variant
The problem I am running into is that the local typecheck is OK, but the Vercel deployment typecheck is failing:
"@chakra-ui/react": "^3.25.0",
"@emotion/react": "^...
- 4,152
0
votes
1
answer
151
views
Middleware function from Auth.js exceeds Vercel 1 MB limit
My application uses Auth.js (NextAuth.js v5) to authenticate. In local, it works fine, but when deploying to Vercel problems arise with the "middleware function size". I tried to "...
- 11
1
vote
0
answers
42
views
thirdweb NFT Collection contract not showing minted NFTs in frontend (useNFTs returns empty, API errors)
I’ve deployed an NFT Collection contract on Polygon using thirdweb.
The contract address is: 0xb853a16bfb7561ED1bf33B080726cb487bdD9006
What works:
The contract and minted NFT are visible in the ...
- 19
0
votes
0
answers
55
views
Nextjs 15 app, all dynamic routes return 404 when deployed
I have a nextjs (15.3.1) application entirely based on dynamic routes, this is the output when I build it:
Route (app) Size First Load JS
┌ ○ / ...
- 3,289
1
vote
0
answers
50
views
i18next not working with languages defined with dashes
Here's my code:
import i18n, { type InitOptions } from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import ...
- 343
1
vote
1
answer
156
views
TailwindCSS custom color not working in Next.js
I've copied directly from the document, but the color is still not showing up. I'm using Tailwind v4 with Next.js.
In my global.css:
@import "tailwindcss";
@theme {
--color-bermuda: #...
5
votes
3
answers
156
views
Why the second letter is being ignored when using my Typewriter component?
I'm currently building my portfolio and im making a typewriter effect for some text :
"use client"
import { useEffect, useState } from "react"
type Typewriter = {
textToWrite: ...
- 47
0
votes
1
answer
118
views
Multiple authentication methods in NextJS with Auth.js
I want to be able to authenticate users with Oauth and protect the API endpoints with Basic authentication. How can I achieve this? My currently configuration doesn't work, unless I remove the Basic ...
- 157
1
vote
1
answer
622
views
Shadcn, React-hook-form, Zod resolver throwing Runtime error when zod validation fails
I am using Shadcn Form which uses React-Hook-Form and Zod Resolver, The problem is when i submit the form by clicking the button while making the input incorrect for testing (Putting 1 char on 2 char ...
- 130
0
votes
0
answers
46
views
How do I use cookies for authentication when using ApolloClient and NextJS
I am working with a NextJS project that needs to access a graphql API. I am using the nextjs app router and am trying to follow the best practices outlined here https://github.com/apollographql/apollo-...
0
votes
0
answers
53
views
Suspense Not Trigger When Change SearchParams
I'm having a problem with my Next.js project (version 15.3.1). I have a page.tsx that looks like this:
import Search from '@/presentation/flows/search';
interface SearchPageProps {
searchParams: ...
0
votes
1
answer
45
views
Cloudinary error "Must supply sdk_semver" only on Vercel deployment
I'm using Cloudinary SDK v2 in a Next.js (Node.js) API route. When running locally it works fine, but after deploying to Vercel I get this error:
Must supply sdk_semver
I searched extensively but ...
- 2
0
votes
0
answers
207
views
Voice activity detection in browser with Next.js v15 and Typescript framework
Here is my user case:
a MediaStreamAudioSourceNode object,
a AudioWorkletNode object,
a Web Worker for ricky123 VAD process.
The local mic audio (or remote peer audio) is streamed to the ...
0
votes
1
answer
173
views
Next.js (App Router) – SSR with Axios & Cookies, CSR vs SSR API calls, and State Management Confusion
’m building a flight booking system in Next.js (App Router) and I want to use Server-Side Rendering (SSR). However, I’m running into some issues with API calls, cookies, and state management.
What I’...
- 11
0
votes
0
answers
47
views
Terser webpack error while building next.js project
I get these errors when I try to build my nextjs project
static/chunks/36443.1f4a0592caf86eec.js from Terser
invalid unicode code point at line 1 column 454144
I tried removing node_modules and ...
- 140