43,456 questions
0
votes
0
answers
9
views
How to use Nextjs server action + redirection
I am trying to display a toast message after a successful action, but I am unsure which method is better for handling redirection and displaying the message.
Client-side redirection (using useRouter): ...
0
votes
0
answers
7
views
Issues integrating S3Storage plugin in PayloadCMS
Been busy trying to setup payload in my application but ran into a roadblock with the S3Storage plugin and I'm at a loss to figure out why this doesn't work with my application but it does work with a ...
0
votes
0
answers
5
views
Active Campaign form does not reload when navigating back in Next.js 14
I have a problem with the ActiveCampaign form in my Next.js 14 component. On the first load, the form appears correctly, but when I navigate to another page and then return, the form does not load ...
0
votes
0
answers
6
views
Nextjs pass big data to dynamic route component
I have component InitiateQuiz where student can choose quiz options like timer, number of questions and topics to be quizzed with, when student clicks on Generate, function handleGenerate will be ...
-1
votes
0
answers
7
views
Nextjs layouts wrapping each other
How to stop next.js layouts from wrapping each other?
I have a / layout that has a header and footer. but in my /gallery layout, I want to display a new Header(footer the same). I know, I can use ...
0
votes
2
answers
37
views
How to handle colors in Next.js 14 with Tailwind CSS?
I am developing a product application using Next.js 14 and Shadcn with Tailwind CSS. I want to know the best approach to handling colors in my project. Since this is a product, I want to ensure that ...
0
votes
1
answer
25
views
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'. When running next build
I'm encountering an issue with my Next.js application when running npm run build or deploying to Vercel. The build process fails with an error originating from the .next folder, though the specific ...
0
votes
0
answers
19
views
Why is my Next.js + Spring Boot website running slow on a VPS, and how can I fix it?
I'm working on a project similar to prompthero.com, where users can post AI-generated images along with their prompts.
Tech stack:
Frontend: Next.js 14Backend: Spring Boot
Database: MySQL
Image ...
0
votes
0
answers
12
views
Importing font from 'next/font/google' spikes compilation times
The font import
import { Archivo_Narrow } from 'next/font/google';
export const archivoNarrow = Archivo_Narrow({ subsets: ['latin'] });
Code change made with import
✓ Compiled / in 33.2s
Code change ...
0
votes
0
answers
17
views
Better Auth CLI: Cannot find module @babel/core
I've been setting up Better Auth in my Next.js project for quite a while now, and I can't seem to make the Better Auth CLI to work which is
npx @better-auth/cli generate and npx @better-auth/cli@...
-1
votes
0
answers
23
views
Next.js library imports not working in server components
After updating my Next.js component library from ver. 1.2.0 to 1.3.0, existing server-compatible components suddenly break when imported into Next.js server components (e.g., page.tsx).
I added a new ...
0
votes
0
answers
21
views
Is there a way to tell Turbopack to ignore .babelrc
I am developing a NextJS application, I am using Turbopack and I am using Jest as a testing framework. I need to include some plugins to be able to run my tests. Here are the plugins:
{
"env&...
1
vote
1
answer
42
views
How to Set NEXT_PUBLIC_* Environment Variables After Next.js Build in Docker?
I'm trying to implement a "build once, deploy everywhere" approach for my Next.js application. I've managed to configure environment variables for server-side components, but I'm struggling ...
0
votes
0
answers
16
views
POST api route authentication doesnt work on cpanel
I am trying to make a simple login api, that works PERFECTLY on localhost.
My server is hosted on cpanel, and while Get routes works well, the login POST routes just get 404 error when I put my ...
0
votes
0
answers
24
views
Global var variable is not recognized as used in my next js application
In my next js application I am trying to connect mongodb by using cached status. But there the type erros has occured by saying global var mongoose variable is not regognizing as used. How can I solve ...
-2
votes
0
answers
20
views
How to Build a Post Posting System in Next.js and Node.js using Instagram Graph API? [closed]
I'm working on a post posting system in Next.js (App Router) and Node.js that allows users to publish posts directly to Instagram using the Instagram Graph API.
Posting to Instagram – How to create an ...
-1
votes
0
answers
36
views
I can't understand. why this data is return to array
My team develop the project that use in high school. and this code has problem that I can't understand. Please help me.
enter image description here
In collections table, collection_id is primary key.
...
0
votes
0
answers
14
views
session callback throws mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function
I'm using mongoose ^8.11.0 with Auth.js 5.0.0-beta.25
the problem is that is inside the signIn callback I can run this code and work without a slightest problem where both controllers are called:
...
0
votes
0
answers
17
views
My Next.js app keeps hanging on "Generating static pages"
I am using the latest Canary version of Next.js and I am trying to deploy it on Vercel but it keeps hanging at "Generating static pages":
Creating an optimized production build ...
✓ ...
0
votes
1
answer
16
views
Framer [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
After installing framer motion and applying some animations to my NextJS component, I get error,
[Error: Element type is invalid: expected a string (for built-in components) or a class/function (for ...
0
votes
0
answers
16
views
Streaming on Cloudfront with next 15 and suspense?
How do I enable streaming / ui loading for a nextjs application on cloudfront?
I have a simple next15 server-side page with a server component that should fetch data on every url query change, meaning ...
-1
votes
1
answer
49
views
How can I prevent useEffect from removing a similar effect?
I have a custom hook that detects whether a user clicks inside a given element or somewhere else. It works fine when used alone on a single page, but when I use two instances of the hook, the ...
0
votes
0
answers
23
views
Problem with PageSpeed Insights: RPC::DEADLINE_EXCEEDED
I have a problem with my portfolio site: https://www.frontendpolska.pl/pl.
I can't test the site in PageSpeed Insights—I keep getting the error:
RPC::DEADLINE_EXCEEDED: context deadline exceeded
or a ...
-1
votes
0
answers
14
views
Clerk middleware problem, how to fix this?
I was trying to integrate clerk in my app and it is giving me problem.
When I click on sign in (Google one) it takes me to Google sign in, then I select my email and after when I click on continue it ...
1
vote
1
answer
51
views
NextJS 15 Build Error occurred prerendering page "/404"
when running NODE_ENV=developement npm run build in nextjs project, there is the following error,
Error: should not be import outside of pages/_document.
Read more: https://nextjs.org/docs/messages/...
0
votes
0
answers
17
views
How do i prevent Next.js from converting @media from max-width to "<=" format?
In my Next.js project I have a CSS file with a responsive rule:
@media screen and (max-width: 1080px) {
.content-box {
flex-direction: column;
}
}
This rule is correctly applied on my desktop ...
0
votes
1
answer
13
views
next.js figlet Error: ENOENT: no such file or directory, open 'pathToProject\.next\server\fonts\Standard.flf'
I created a new next.js app using npx create-next-app@latest (next.js 15 at the current time)
Then I removed the node_module folder and run
pnpm install
It was successful and with
pnpm run dev
I saw ...
0
votes
0
answers
21
views
Issue with streamText in OpenRouter AI SDK on Vercel (AI_APICallError: Not Found)
I’m using OpenRouter AI SDK in my Vercel project to implement AI-powered chat streaming. While textGenerate works fine, streamText fails with the following error:
Error from the streamText: ...
1
vote
1
answer
51
views
Shadcnui React Form with Zod: The error messages are not displaying correctly
I created a Next.js app following the ShadCN UI documentation: https://ui.shadcn.com/docs/installation/next. I'm using Tailwind v4 and now I want to add a form with Zod, so I followed this ...
0
votes
0
answers
16
views
Hydration error when wrapping useSearchParams with Suspense
I used useSearchParams not wrapped in Suspense, but now I need ISR and I was getting build errors saying I should wrap every component using useSearchParams in Suspense.
Now that I wrapped it I am ...
0
votes
0
answers
14
views
How to ensure full HTML content is rendered on initial load in Next.js for SEO optimization?
I have a Next.js website where I am using client-side features like context providers. However, I am not getting the full HTML content on the initial HTML response. Instead, the content is loaded ...
0
votes
0
answers
10
views
Server actions processing FormData
i pass to my server action(next js "use server") list of items
each item has attribute .file
inside .file contains FormData with file
when i try to access that files in my server action
for ...
0
votes
0
answers
16
views
How to Reverse Proxy Heroku from Vercel for Authentication Purposes?
I'm trying to authenticate my users from my app hosted in Vercel in order to retrieve their data, however, my application needs to communicate with Heroku where my API is located.
I've been trying ...
0
votes
0
answers
28
views
Page Resizes on Navigation to Sign In Page in Next.js, But Works Fine on Refresh
I am encountering an issue in my Next.js app where, when navigating to the Sign In page via a link (<Link href="/signin">), the page initially appears smaller or resized (around 90% of ...
-1
votes
1
answer
17
views
MapBox: Clustering routes (A -> B)
I am using react-map-gl and mapbox-gl in my nextjs application.
This is my first time using advanced map rendering.
I need to cluster routes. Each route has StartPoint (lat, lng) and EndPoint (lat, ...
0
votes
2
answers
44
views
I want to show data conditionally but i am facing this error
I want to show data conditionally but i am facing this error. before loading token its show no cart but after loading i issue this error. i am facing many pages where i update texts after getting data ...
0
votes
0
answers
12
views
Preview channels and multiple rollouts in firebase apphosting
In the new firebase service called ‘Firebase Apphosting’ (not firebase hosting), i have two requirements regarding deploying my NextJS 15 app (pnpm based, with env variables and secrets defined):
...
0
votes
0
answers
21
views
Suspense fallback not shown in production on AWS via SST
So I have a problem with my suspense in Next 15. My Suspense fallback is not shown in production, but works as intended on localhost, even when ran with next build && next start, so even with ...
-1
votes
1
answer
32
views
React19 and Nextjs15 Hydration errors
sometimes a get random hydration error out of nowhere. and it doesnt specify like div inside a p tag. it just shows up even I add surpessHydrationErrors on both html and body tags. sometimes, I just ...
0
votes
0
answers
20
views
Wordpress + ACF | REST API Query the Results by the Initial Character
I’m developing a custom data directory using WordPress and Custom Form Fields, and I’m fetching the data through the WordPress REST API to display it in a Next.js web application.
I need to filter the ...
1
vote
0
answers
37
views
PWA Why are service workers not visible under the Application tab in Chrome for Next.js 15?
I am learning Progressive Web App (PWA) development in Next.js and using the @ducanh2912/next-pwa package.
Setup:
Next.js version: 15.0.4
PWA package: @ducanh2912/next-pwa
I have configured my next....
1
vote
0
answers
19
views
I get AbortError: OTP retrieval was cancelled before receiving SMS
import loginServices from "@/services/login/ServicesLogin";
import React, { useState } from "react";
import toast from "react-hot-toast";
const TestPage = () => {
...
1
vote
1
answer
41
views
Dynamic table, display nested property in TableCell from array of objects
I have an array tracks of type Track[]. I need to display them in a HeroUI/NextUI table dynamically. The example uses getKeyValue, which is a function in the HeroUI library, to dynamically retrieve ...
2
votes
3
answers
83
views
Why do I keep getting the ApiNotActivatedMapError when I've checked that my API key is working and able to call the necessary maps APIs?
I'm trying to create a React component for a text input field using the Google Maps API autocomplete feature. This is the code I have so far:
"use client"
import React, { useRef } ...
0
votes
1
answer
41
views
Why does Supabase keep throwing a http 406 (Not Acceptable) error?
RLS is disabled. Role is anon. Seems like that the necessity right?
This is my code using nextjs. I made it works previously, but not sure why it doesn't work now.
const fetchSupabaseUser = async (...
0
votes
1
answer
29
views
Mock multiple images from next/image in cypress
I need some help on mocking the tag from next/image in cypress component tests.
I am using Nextjs 15.1.6, cypress 14.1.0, and turbo for nextjs instead of webpack.
After a lot of hard work, I ended up ...
0
votes
0
answers
21
views
Path alias or prefix translation for Next.js Image Optimization API
I have developed an application in Next.js and I use the Next.js Image Optimization API.
The Next.js Image Optimization API is easily accessible via the path /_next/image?url=<image-url>, where ...
0
votes
0
answers
19
views
Integrate NextAuth in .NET environment
I've developed an application utilizing Next.js for my client side, and an ASP.NET Core 8 Web API for my backend.
The auth flow is fairly simple. My backend issues short-lived access tokens, along ...
0
votes
0
answers
25
views
Downloading file is blocked in google workspace add-on [closed]
I am working on Google add-on project and it has been built with Next.js and Flask.
The codebases of both backend and frontend are correct but downloading file is blocked on google add-on.
I think it ...
0
votes
0
answers
21
views
Sanity Blog fetching worked on local but failed on Cloudflare production
I am having problems deploying my NextJS app which has some fetching from Sanity Blog Studio. Everything worked well on local but keeps falling 500 Internal Server Error on Cloudflare production.
I ...