43,521 questions
0
votes
0
answers
6
views
How can I get my navbar-on-scroll effect to work in next.js?
I am in the middle of transferring my project from Vite + React to Next.js and I am trying to create a changeColourOnScroll function on my Navbar.jsx component but it's not working. Here is my Navbar....
0
votes
0
answers
7
views
How to deploy a SSR NextJS to Amplify manually (without Git repository provider)?
I have a NextJS SSR with dynamic routes that I want to deploy to Amplify. Our git is selfmaintainer so the option of using it to deploy is not possible.
In the zip upload it's stated that SSR is not ...
0
votes
1
answer
11
views
useFieldArray not assignable to type never
Hey I am building a dynamic form with the help of useForm in React. Somehow I have a typescript error I can not fix, even with many example codes and the docs.
I built an zod validation file. That ...
0
votes
0
answers
17
views
Page Rendering Multiple Times in Next.js (v14.0.1)
I'm developing a new feature in a Next.js project and have encountered an unexpected behavior. The page hosting the component in question is rendering multiple times, even though the props remain ...
0
votes
1
answer
12
views
Nextjs 15, Type error when calling a server action from a form with a bind
Using nextjs15, when I call a server action from a form in a server component with a bind, I have the following error when I compile my project for production mode (in dev mode, it works):
Type error: ...
1
vote
0
answers
31
views
onClick button doesnt work in my project with Next.js 15.1.3 version
I have a problem in my project that the onClick property on the button tag does not run even though my code is also not an error my debugging also has no changes, I am using next js version 15 and ...
0
votes
0
answers
12
views
Configuring Jest to render a component with alias
I'm using Jest with Testing Library on TypeScript. When I try to use the render function (from Testing Library) to load a component with this type of import, for example:
import backgroundImage from '@...
0
votes
1
answer
35
views
Next.js: Refresh cookie's value becomes null when page idle
I store the access token and refresh token in separate cookies, with both set to expire after 7 days. The access token itself expires every 10 minutes. I’ve implemented a refresh token function that ...
-1
votes
0
answers
15
views
How to fix "MissingCSRF: CSRF token was missing during an action signin" error when signing in using Flutter REST API with AuthJS and Next.js?
I'm using AuthJS with Next.js for the backend authentication. I'm trying to implement a sign-in request from a Flutter app using REST API. However, I keep encountering the following error:
MissingCSRF:...
0
votes
0
answers
16
views
Missing required html tags NEXTJS
I'm working with i18NextJs in a Next.js 15 that uses the App router and next-i18n-router. My NotFound pages, default are not working as expected. I'm seeing an error about missing and tags in my ...
0
votes
0
answers
11
views
Unable to login locally using Auth.js but can still query supabase database?
I'm a relative newbie to Next.js, and Java/TypeScript in general. I've built an app following the tutorial here https://nextjs.org/learn/dashboard-app/adding-authentication#protecting-your-routes-with-...
0
votes
0
answers
14
views
how to use hover to change another element in styled by tamagui?
I have a container in which I need two elements so that when I hover over the container, one element will be hidden and the other will be highlighted. Styled by tamagui is used.
I know how to do it in ...
0
votes
0
answers
18
views
Next redirect gives error when trying to redirect 401 errors from Axios Interceptors
In my project where I use Next JS 15 and React 19, I am trying to redirect using next redirect from the interceptor. But when I try to make this redirect:
Error: NEXT_REDIRECT
at <unknown> (...
0
votes
0
answers
20
views
How to pass additional arguments to Next.js Server Actions
I am building a file upload page in NextJs.
I Utilised the useActionState alongside initialState.
The issue
If a validation error happend in the backend after submitting, the data retrurned to the ...
0
votes
0
answers
17
views
How to simulate map-box rotation ( bearing ) in Playwright E2E test?
I have a React component ( Next JS ) :
"use client"
import { getEnv } from "@/actions/env"
import Layers from "@/features/solar-analytics/panel-installation/map/components/...
0
votes
0
answers
12
views
Logging JSON.stringify of request is producing incorrect results in NextJS middleware
I am trying to log the request the nextjs server received in the middleware.
I am able to log the request through console.log(request).
However when I use console.log(JSON.stringify(request)). I see a ...
0
votes
0
answers
9
views
Updating my nextauth session is not detecting changes from the Database
I'm trying to implement a user reactivation feature. Everything is working except my nextauth session.
API call to Database is working, it's confirmed that field isDeactivated:true is being deleted ...
1
vote
0
answers
9
views
interrupting downloading Metamask in AppStore
I have the problem
When a user who does not have MetaMask installed clicks the "Connect Metamask" button, they are redirected to the App Store or Play Store to download MetaMask. However, if ...
-1
votes
2
answers
55
views
How can I update UI after receiving payload from a webhook [closed]
I am displaying data from another application so when the new data added to that app i want my application get that data and update the UI with the latest data. I am using webhook to get the newly ...
0
votes
1
answer
22
views
How to fetch data in server side and use in client component of app/page (root page - client)?
I want to fetch some data in server component and pass down to client component in app/page.jsx.
I tried making page.jsx server component but it throws error as children are client component.
Tried ...
0
votes
0
answers
14
views
Stripe Webhook doesn't working at live mode
I have a problem and can't get any further. I wanted to complete my NextJS project and switch. But Stripe Live Mode Webhook doesn't works
My webhook code:
"use server";
import { db } from &...
0
votes
0
answers
31
views
How to resolve the 'Application Error: A Server-Side Exception Has Occurred' while deploying a Next.js website on Amplify?
We are facing an issue when hosting a Next.js application on AWS Amplify. The application throws the following error:
Application error - a server-side exception has occurred (see the
server logs for ...
0
votes
1
answer
15
views
Next.js: Import Error with react-email - renderToReadableStream Not Exported
I am working on a project in Next.jsand implementing a signup functionality. When I submit the signup details using the submit button, I encounter the following error:
Import trace for requested ...
-1
votes
1
answer
50
views
Is it better to use a server or a client component for components that must refresh often? [closed]
I'm building a chat app. Currently, my client component makes requests to a route handler inside useEffect to refresh the messages board twice every second or so. See example:
"use client";
...
0
votes
0
answers
10
views
Losing query params on headless (Shopify) site?
On NextJs, I noticed an issue where no matter the params, let's say: mysite.com/productpage/necklace/blue-necklace?utm_source=SOURCE&utm_medium=NOTFREE, the page loads and instantly gets rid of ...
-2
votes
1
answer
33
views
Stray Semicolon in Next.JS
I'm new to front end development and am learning Next.JS. I went through the course on the website and have started my own project. I've noticed that there is a stray semi-colon at the very bottom of ...
0
votes
1
answer
25
views
update useFieldArray fields when index changes
I have this simple code in NextJS:
const {
fields: alternatives,
append,
remove,
replace,
} = useFieldArray({
control,
name: `questions.${questionIndex}.alternatives`,
});...
0
votes
0
answers
18
views
"Uncaught Exception: Error: Connection terminated unexpectedly" with Next and Vercel Supabase Postgres
I'm currently working in a project that uses Next 15, React 18.3.1 and Vercel's Postgres database (supabase). All the connection to the database is done in Next's api. The connection to the database ...
0
votes
1
answer
36
views
Is manually tracking the first render and acting on it an anti-pattern or bad code?
I'm working on component that works with MobX store and I ran into a problem. When I go to a page with a different item id, after loading the data, I see the previous data before the new one is ...
0
votes
0
answers
17
views
Strange error when attempting to log prisma error object within a next.js route handler
With the following code:
export async function PUT(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const body = ...
0
votes
1
answer
40
views
I am getting an error just creating a fresh Next.js app, without adding ANY code
I am getting an error just creating a fresh Next.js app, without adding any code.
npx [email protected] --ts
Hi. Does not make sense that a fresh app without any code added is having an error.
...
0
votes
0
answers
16
views
loading state and autenticated state not showing properly on a navbar component
In my NextJS15 project, I have a sign in / sign out component for my nav bar. I am using Supabase auth (login with password and email).
I have a problem with the behavior of my sign in / sign out ...
-1
votes
1
answer
32
views
Unexpected import error in turborepo package
I am working on my first demo project with TurboRepo. Plan is to create a types named internal package which will share types to the UI as well as to the Server. I followed these steps to create types ...
0
votes
0
answers
21
views
How to Retrieve the User ID with OAuth (Google Provider) in authjs?
I’ve successfully implemented sign-in and sign-out functionality using the Google provider in authjs. However, I’ve encountered an issue: when a user is logged in, I don’t have a unique identifier to ...
-1
votes
0
answers
30
views
What would be best way to convert small part of webapp to mobile app [closed]
I have a restaurant menu web application, where the restaurant owners can manage their menus and have a specific menu page where the customer browse the menu item, now the customer want to have a ...
1
vote
0
answers
40
views
How can I upload a file when updating an onChange event?
I am using Nextjs and Resend to send emails from different forms. All my forms send the data without problems except for one which involves uploading a file.
This is how I build my forms.
I have a ...
0
votes
1
answer
31
views
How to send message to telegram chat
I create an api in nextjs "/api" folder.
I have tried several solution but each one returns same error.
I am using node-telegram-bot-api and same issue is still occurring. Any information ...
-1
votes
0
answers
29
views
Google Chrome is not deleting expired cookies [closed]
I'm building a NextJS website and I'm storing user tokens in cookies. When the cookie expiry date is hit it should be deleted automatically and the middleware is checking for the refresh token and ...
0
votes
0
answers
23
views
Type 'Props' does not satisfy the constraint 'PageProps' Next.js 15.1.3
Can someone help me about this error. I cant find any solutions about it.
.next/types/app/admin/editmodel/[markaid]/page.ts:34:29
Type error: Type '{ params: ModelProps; }' does not satisfy the ...
-1
votes
0
answers
23
views
Turnstile do not show on safari [closed]
I'm facing a problem with turnstile integration, I need it to be initially rendered on my page not depending on browser I use. Everything works perfectly on chrome browser, but when I try to open ...
-1
votes
0
answers
31
views
How can I disable ESLint when deploying Next.js in Vercel?
I've been trying to deploy my website in Vercel, but I use any sometimes in my code. I know that disabling ESLint is not a good, but currently I need to deploy the website for initial output. I tried ...
0
votes
0
answers
24
views
The id provided does not exist razorpay in nextjs/nodejs
I'm creating an order from the frontend, and the backend sends me the subscription ID for the user. When I open the Razorpay payment popup, it sometimes shows the error: "The id provided does not ...
0
votes
0
answers
24
views
Nextjs middleware is not able to read cookies, when deployed on Firebase hosting
I have a Nextjs 15.1.3 website that works well in development mode (locally). However, when deployed to Firebase hosting, I am no longer able to read cookies in the middleware.
Here is what I am ...
0
votes
0
answers
20
views
Ensure Private Key Environment Variables NextJS are private next.config.js
I'm implementing a "Contact Us" email functionality where I need environment variables for sensitive information such as a username and password for email authentication PRIVATE_KEY and a ...
0
votes
0
answers
39
views
Fetching data with axios/server actions/authentication cookies
I have a REST API/Express + NodeJS (backend) and a Client Site/NextJS(frontend) and the authentication between them is done through JWT.
My REST API returns accessToken and refreshToken through ...
0
votes
1
answer
17
views
How to read environment variables server-side in NextJS
Using NextJS v14 with the app router paradigm. I have tried two different high-level approaches to reading environment variables in server-side code, and neither worked. How can I achieve this without ...
2
votes
1
answer
18
views
Out-Of-Range value for MUI select with dependent select values
I'm currently running into this issue where I have one select field that is dependent on the other one.
MUI: You have provided an out-of-range value `1` for the select component.
Consider providing a ...
0
votes
1
answer
67
views
Why send formData to a server action on form submission?
I am using NextJS app router and shadcn/ui(uses react-hook-form and zod).
In all the code examples I have seen, the form action receives formData. but in my experience, the formData might not always ...
0
votes
1
answer
26
views
Flutter & Next.js React Communication - Firebase ID Token Immediately “Invalid or Expired” in Next.js/Node Despite Being Fresh
I have a Flutter app that signs users in with Firebase Auth. Right after sign-in, I call:
final user = FirebaseAuth.instance.currentUser;
final idToken = await user?.getIdToken();
Then I send that ...
0
votes
0
answers
21
views
uncaughtException: RangeError: Array buffer allocation failed Next.js
I got an error:
RangeError: Array buffer allocation failed
at new ArrayBuffer (<anonymous>)
at new Uint8Array (<anonymous>)
⨯ uncaughtException: RangeError: Array buffer ...