42,131 questions
0
votes
0
answers
131
views
Next.js + Framer Motion page transition: new page appears at old scroll position before jumping to top
Context / goal:
I’m building a Next.js project with Framer Motion for page transitions. The old page should slide out from its current scroll position, and the new page should slide in starting at ...
2
votes
0
answers
85
views
NextAuth sends two refresh requests simultaneously on page reload (refresh token rotation)
I'm using NextAuth with a custom backend in my Next.js app.
When I refresh the page, two refresh requests are sent almost simultaneously.
The first request correctly calls /auth/refresh and gets a new ...
- 133
0
votes
0
answers
37
views
Arbitrary width and height classes like max-w-[500px] not applying after upgrading from v3
I'm using tailwindcss in nextjs and encountered this problem after running npx @tailwindcss/upgrade to upgrade from tailwind v3 to latest v4.
Basically nothing with width or height apply anymore. No ...
0
votes
1
answer
230
views
next.js - error build - [TypeError: Cannot read properties of null (reading 'useContext')]
I created a new Next.js project using the command: npx create-next-app@latest
The project installs without problems. The created package.json:
{
"name": "test_4",
"version&...
0
votes
1
answer
276
views
Next.js 16 Beta: Metadata tags showing up in body instead of head (breaking SEO)
I've been pulling my hair out over this for hours. My metadata is rendering inside the <body> tag instead of the <head> on the server-side HTML, which is completely breaking SEO.
The weird ...
- 11
2
votes
2
answers
110
views
Why isn’t my CSS position: sticky working? [duplicate]
I have sidenavigation, that has container as a wrapper for position: sticky and height of container is equal to next element in it`s parent flex component:
I am using Nextjs and SCSS:
export function ...
- 75
0
votes
0
answers
62
views
I'm creating a typing game, and can't figure how to make a Tab being recognized as 4 spaces
My snippets in my typing game are pieces of code, so I need to use tab obviously, but I have some logic that displays a yellow block on an current character I have to type, but when I press enter and ...
- 1
0
votes
2
answers
137
views
Background color rendering bugs out when website is restarted
I'm building a website using NextJs and tailwindcss but have run into a problem.
Every time I restarted the website, the colors of these buttons would disappear except for the black one
[page.tsx]
<...
1
vote
0
answers
46
views
Process is not defined / process.binding is not supported error after deployment, but works locally
I have a Next.js 15 project that uses AWS Amplify (Cognito) for authentication.
Here’s a simplified version of my config file:
"use client"
import { Amplify, type ResourcesConfig } from &...
0
votes
0
answers
25
views
Next.js not showing loading.tsx while static route is loading
Other similar questions didn't solve my problem. I have a route like:
export default async function PromptListPage() {
const prompts: PromptListItem[] = await fetchPromptsFromDB();
return (
&...
- 13
0
votes
1
answer
56
views
NextJS hydration error: React children render before async i18next changeLanguage() switch completes
Introduction
Hello everyone,
I have come across an issue with the nature of how NextJS handles asynchronous functions in client components that prevents me from resolving this matter further:
I opted ...
- 79
0
votes
0
answers
33
views
`pm2 start` doesn't reload environment variables
I have a NextJS application running with pm2 and recently I updated the app with Apple signin feature. So, I have to setup two new environment variables in my server, namely AUTH_APPLE_ID and ...
- 1,722
0
votes
0
answers
76
views
Using Tanstack Query with Tanstack DB: Instant update when deleting and adding
I am new to everything here, I need help if this will load fast.
The Problem: When i am using normal API Calls, it takes a while to update the UI of the changes. I’m currently working implementing ...
- 1
0
votes
1
answer
75
views
How can I add meta tags with custom attributes like itemprop, http-equiv, or data-* in Next.js 15.4.3 (App Router)?
I'm using Next.js 15.4.3 with the App Router and the new Metadata API for SEO.
It correctly renders standard meta tags with attributes like name, property, and content, but I also need to include meta ...
- 20
0
votes
1
answer
37
views
Next.js 15 Build Error: Type 'OmitWithTag<{ reportId: string; }, keyof PageProps, "default">' does not satisfy constraint
I'm encountering a TypeScript build error in Next.js 15 with dynamic routes. The error occurs during next build and seems related to the new Async Request API.
.next/types/app/(app)/seo-audit-tool/[...
- 29
0
votes
0
answers
41
views
Swiper.js centeredSlides with loop not showing next slides on mobile
I'm using Swiper.js with centeredSlides: true and loop: true on mobile. I want the current slide centered and the previous/next slides partially visible (about 20% on each side).
Currently, the first ...
- 13
1
vote
2
answers
72
views
VS code no longer recognises css or scss files
I am using VS Code and NextJS to build the frontend for the application.
VS Code is reporting the following error:
Cannot find module or type declarations for side-effect import of
'~/styles/layout/...
1
vote
1
answer
72
views
Payload CMS: Internal links are not rendered correctly
i am trying to save my Lexical richText field to a lexicalHTMLField inside a payload CMS Block, but my links are not rendered correctly. All internal links are just shown as <a href="#"&...
- 11
2
votes
0
answers
53
views
generating public token via server action and set it on cookies on client component forward by router refresh sometimes not available sever actions
When using Next.js Server Actions to generate a token and then set a cookie on the client, calling router.refresh() immediately after may not always expose the cookie to subsequent server actions or ...
0
votes
0
answers
53
views
Next.js 15 server crashes with segmentation fault on Linux when loading images (works with sudo or unoptimized: true)
I'm having a really weird issue with Next.js 15.2.3 on Linux Ubuntu 22(Node 22.20.0, pnpm 10.18.0). My dev server compiles fine, but when I navigate to any page with next/image components, I get a ...
- 35
0
votes
1
answer
52
views
Tailwind css issue with Next Js 13.4 Version [duplicate]
Facing following issue with Next JS 13.4 version:
It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using ...
- 40
1
vote
1
answer
103
views
Next.js doesn't see middleware
I have middleware for next.js app:
import { getToken } from "next-auth/jwt";
import { NextRequest, NextResponse } from "next/server";
const PUBLIC_PATHS = ["/", "/...
- 21
-4
votes
1
answer
71
views
How to restrict routes in next js
I need want to send the only authenticated user to the /chat route in next js how to do ut using the middleware? Although I created a middleware and place it inside the root folder it dosen't detect ...
0
votes
0
answers
41
views
How to prevent auth token from being stolen on the Nextjs client side of socket.io?
This is my nodejs server socket.io code:
const io = new Server(server, {
cors: {
origin: "*", // Allows connections from any origin
methods: ["GET", "POST"] // ...
- 797
0
votes
0
answers
113
views
How to set up subdomain-based multi-tenancy with Next.js, Supabase (DB/Auth), and next-intl?
I’m trying to build a multi-tenant platform similar to how Sentry works, where the root domain (e.g. https://sentry.io/en) serves the marketing site, and each tenant has its own localised subdomain (e....
- 308
0
votes
1
answer
76
views
Prisma won't execute seeder in nextjs
whenever i run npx prisma db seed it returns this error:
Prisma config detected, skipping environment variable loading. Running seed command `ts-node prisma/db/seed.ts` ...
Error: Cannot find package ...
- 137
0
votes
0
answers
48
views
How to retrieve all permission details including resources, policies, and scopes from Keycloak?
I'm working with Keycloak and trying to fetch all permission details for a client, including the associated resources, policies, and scopes.
So far, the only API I found is the following:
const ...
- 35
-1
votes
2
answers
85
views
How to enforce identical keys across multiple i18n JSON translation files in TypeScript?
I’m working on a multilingual application with the following structure:
messages/
├── en.d.json.ts // baseline type definition
├── en.json
├── ja.json
├── zh-CN.json
└── zh-TW.json
Each file has ...
- 560
0
votes
2
answers
92
views
Using the fill prop in Next Image but the images are not showing
I'm mapping the images to display them. I'm using fill prop of Next Image but the images are not showing in the browser. It's showing the moment I use width and height props.
I could have gone with ...
-4
votes
2
answers
115
views
How to declare prototype function in Next.js, React, TypeScript, so server side and client side can see it?
I am trying to declare global prototype function in Next.js, React, Typescript, but I am getting error <object>.<functionname> is not a function.
I have a file ArrayFunc.ts, in which I ...
- 3,560
0
votes
1
answer
87
views
Nextjs 15+ on aws amplify
I'm deploying a nextjs app router project on AWS Amplify, not my personall preference but the client wants it on AWS
When deploying, I found that the Amplify enforces minimal edge runtime on all of my ...
- 476
1
vote
1
answer
218
views
Generated file uses skipToken import incorrectly in Next.js App Router
I’m using Apollo Client v4 (4.0.5) with Next.js App Router and GraphQL Code Generator (typescript-react-apollo) to generate TypeScript types and hooks for my GraphQL API.
Everything was working fine ...
- 11
0
votes
1
answer
66
views
TMDb API Error: signal timed out when fetching popular movies
Problem:
I’m trying to fetch popular movies from the TMDb API in my Next.js project, but I keep getting a signal timed out error.
Here’s the error log:
TMDb API Error: signal timed out
at ...
- 1
0
votes
0
answers
58
views
Function not working as intended in clerkMiddleware
I've installed clerk on my project and I want to have certain routes used as protected but auth.protect() doesn't seem to have any effect.
middleware.ts
import {clerkMiddleware, createRouteMatcher} ...
- 11
-1
votes
1
answer
80
views
Prevent <iframe> from reloading on component re-render in a tabbed Next.js dashboard [closed]
I’ve developed a tabbed UI dashboard in Next.js and React, where each new menu item opens in a new tab inside the dashboard panel. I can manage the tab mount state without issues.
However, I’m facing ...
- 3
0
votes
0
answers
26
views
My Widget does not work properly Because of different grid sizes
I used a custom grid structure. Not only it doesn't work as I want on different screen sizes, but also the widget I defined externally does not fit into different grid structures. Here index.jsx:
this ...
0
votes
0
answers
50
views
Next.js <Image> fails for new uploads (gets HTML response), requires manual pm2 restart to fix
I'm facing a very persistent and unusual issue with a Next.js application in production. The core problem is that whenever a new image is uploaded to the /public/uploads directory, the Next.js <...
- 65
2
votes
1
answer
116
views
Text alignment shifts upward when using Arabic font (Tajawal) with Tailwind CSS and Next.js RTL
I’m working on a project using Next.js + next-intl + Tailwind CSS.
For English I’m using the Poppins font, and for Arabic I’m using Tajawal.
The problem is that when switching to Arabic (RTL), the ...
23
votes
2
answers
7k
views
Next.js: "Cannot find module or type declarations for side-effect import of './globals.css'" ts(2882)
I just created a Next.js project using npx create-next-app.
Today, I opened my Next.js projects in VS Code and all of the .css imports suddenly start showing this error:
Cannot find module or type ...
2
votes
1
answer
171
views
'picker' is not recognized as a valid pseudo-element
im pretty new in web development and im making a project, i wanted to use the fab component from daisyui but it wasnt working properly and so i though it my be a version issue, i update my version &...
- 33
0
votes
0
answers
75
views
Cloud Run service deployment fails with "Internal Error" after billing reactivation in project careershot
Title: gcloud run deploy fails with "Internal Error" for a specific service and region
Body:
I am encountering a persistent "Internal Error" when trying to deploy to a specific ...
0
votes
0
answers
71
views
My self hosted remote Nextjs application is unable to connect to my neon database server
My nextjs application is hosted on a remote server ( i own the remote server ) - uses prisma as ORM and neon as database.
ERROR DETAILS ( server terminal ):
npx prisma migrate deploy
Environment ...
0
votes
2
answers
135
views
Error occurred prerendering page "/" when I try to build a Docker image for Next.js 15 App router project
I'm a college student in CS and new to React and Next.js 15.
Now I'm working on a testing front end project, the tech stack combination for the project is Next.js 15 App router + Typescript.
I try to ...
0
votes
0
answers
81
views
google auth + firebase hosting + nextJS: State cookie was missing
I am developing an app in nextJS using next-auth for authentication. So far I only have Google as provider. The app is hosted using firebase hosting.
Running the app in localhost works fine, but when ...
- 40
0
votes
0
answers
24
views
Next.js 14 App Router – SEO metadata not rendering where I expect
I’m working on a Next.js 14 project with the App Router.
I’m using the generateMetadata function in my dynamic route to set page titles and descriptions, like this:
export async function ...
0
votes
1
answer
108
views
How to pass auth token from web embedded vertex ai chat agent to playbook
I have created a Vertex AI chat agent and embedded it into the NextJS app using the conversation messenger. Below is the code snippet.
<df-messenger
location="xxxxxxx"
project-id=&...
0
votes
0
answers
53
views
Connecting Java backend(Servlets) to Vercel frontend(fetch API). Cors Error
So basically I have put up my backend on Render web Service (on tomcat) and my frontend(Nextjs) is on Vercel. I have put up a Filter for Cors Policy to intercept all policies and as well as handled ...
- 1
0
votes
0
answers
116
views
Next.js with VS Code dev container
I would like to use VS Code dev container for developing Next.js application.
Therefore I do these steps in VS Code:
New Dev Container,
After creating container I move out .devcontainer and .github ...
- 713
0
votes
1
answer
97
views
NextJs can't import package from file system
I have a NextJs (host) app and a separate utility package published to Github's registry. I want to be able to debug and iterate on the utility package locally when running the logic from my NextJs ...
- 1,379
0
votes
0
answers
42
views
Add Custom Ordered List to PayloadCMS RTE
My previous post was being closed by its own, though it's still not solving my problem
HERE
the current RTE toolbar already provide a numerical ordered list, and I want to add more (alphabetical and ...
