Questions tagged [next.js]
Next.js stands as a sleek and streamlined framework, dedicated to crafting server-rendered React applications alongside the ability to export React apps in static format.
Encountering an error during deployment of a next.js app to Vercel, although local builds are functioning normally. The issue seems to be related to the [replaceAll][1] function The error message received is as follows: Error occurred prerendering page &q ...
For a complete minimal reproducible repository, visit this link. This application is a chat app that features the following routes: /chat layout.tsx - server component containing the Sidebar which is also a server component /chat/[id] - client compone ...
Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...
I am attempting to incorporate openCv.js into my next.js application a. I started the project with: npx create-next-app b. Next, I installed: $ yarn add @techstark/opencv-js c. Imported OpenCV with: import cv from "@techstark/opencv-js" d. Ho ...
Currently, I am in the process of developing a new website using Next and have integrated Snipcart. The Snipcart UI incorporates Vue.js along with embedded images and an external CSS file, which unfortunately contribute to a significant increase in the pag ...
Having an accessibility issue with a toggle input while using VoiceOver on a Mac. The problem is that when I turn the toggle off, VoiceOver says it's on, and vice versa. How can I fix this so that VoiceOver accurately states whether the toggle is on or off ...
I'm facing a challenge in animating a div that contains input elements. I want it to expand smoothly - initially, the text area is small and the other two inputs and buttons are hidden. When clicking on the text area, the input and button should be re ...
I have successfully utilized the new app router to create a route handler for a GET request and received the data in my console. Now, I am looking to integrate this data into NextJS v13.4. How can I achieve this? Below is the route handler I created to fe ...
An error occurred while migrating from Create React App to Next. I am unable to use Redux and have tried multiple solutions without success. https://i.stack.imgur.com/gfOaE.png _app.js import "../styles/globals.css"; import App from "next/app"; import { ...
While attempting to retrieve data from the Bloomberg API, I encountered an issue when trying to extract the title from the response object. The error message received was: Property 'title' does not exist on type 'never'. Below is the code snippet in ques ...
I am using custom headers to set the cookie in my next.config.js file. The refresh token is successfully set, but for some reason the second token is not being recognized. key: 'Set-Cookie', value: `RefreshTokenKey = " ...
Currently, I am in the process of reworking a React application to be compatible with NextJS, as I need to utilize the backend accessed through /app/api route. However, I have encountered the following error: ./node_modules/@tensorflow-models/speech-comma ...
Hello, I have a dilemma with my Next.js project. If I build it, the connection to the backend breaks, which is not ideal. When I try to launch on Heroku using npm run build, everything works fine except for the backend connectivity issue... Below is an ex ...
The current development environment is utilizing next.js version 13. An issue has arisen after updating the query-string library to version 8.1, causing the test:ci to fail at a specific point. Here are the details of the failure: before "query- ...
When I try to initialize a const, I encounter a "window is undefined" error in nextjs. To resolve this issue, I have attempted the following code: if (typeof window !== "undefined") { const web3Modal = new Web3Modal({ network: "mainnet&q ...
In my Next.js application utilizing GraphQL to fetch articles from a server, I encountered an issue with dynamic routing when reloading the page while on an article and attempting to navigate back. The usual scenario works as expected: Index -> [slug] ...
My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection. Currently, these two components.. <HoverVi ...
I am developing a website with Next.js but encounter this error repeatedly. I'm unsure of what's causing the issue in my code. The following errors are displayed: Error: Hydration failed due to initial UI mismatch on the server side. Warning: The server ...
After creating a NextJS App and implementing firebase for authentication and firestore, I purchased a domain from GoDaddy and am currently hosting it on Vercel. Despite everything working as intended, the issue I'm facing is that I cannot seem to add a cu ...
Summary: Encountering the error Error: Objects are not valid as a React child (found: [object Promise]) while making a fetch request in a Typescript project. Interestingly, the same code snippet works without errors in a Javascript project. Recently, I ...
Is there a way to fetch the layout data along with the page without adding it to every individual page? The issue I'm facing is that my layout component, loaded once on App.jsx, remains consistent throughout the session. However, due to SSRed page loading, ...
In my Next.js project, I am utilizing NextAuth. The issue I'm encountering is that NextAuth consistently returns a 200 status code and updates the session to authenticated, even when the username or password doesn't match. I've attempted throwing simple er ...
I recently completed a small project that involves uploading a CSV file and processing its content to populate a MongoDB collection. However, I am encountering two errors: In the VS Code console: API resolved without sending a response for /api/upload, t ...
If I have a setup with a component like the example below, how can I efficiently pass the onChange prop to every instance of DropdownItem? Rather than adding it directly to each DropdownItem, which could become repetitive. <Dropdown onChange={(select ...
I'm currently in the process of utilizing MDX pages along with React components for a project. My issue lies in wanting to generate HTML when adding text inside a component, similar to how it works with content outside of components. However, I've noticed ...
I've developed an application using NextJS that is currently hosted on Netlify. The API, which is a NestJS project running GraphQL, is hosted on Heroku. While in local development mode, all my SSR pages work flawlessly. However, when transitioning to prod ...
What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...
I am working with a Next.js component: import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} ...
I have recently started using Framer Motion and I must say, it's a game-changer for animating divs and creating page transitions. However, I am facing a challenge while trying to animate the parent <form> tag based on the toggle state of my form usin ...
At this moment, I am facing challenges while integrating the next-auth credentials provider into my system. I am using axios (connecting to a different localhost) to validate the credentials (email & password). The Next.js system runs on http://localhost ...
Just tested this on 2 different computers and I'm getting the same errors every time I create a brand-new project with create-next-app. Didn't used to get this error before. What happened? https://i.stack.imgur.com/7wOqA.jpg ...
I've encountered an issue while trying to build an API with the NextJs framework and hosting it on Firebase (Hosting and Functions). The GET requests work fine, but when I try to send a POST request, I keep getting a "502 Bad Gateway" error. To replicate ...
Is it possible to toggle the URL from the getData function? I have my main page component with JSON todos. Can I replace 'todos' with 'users' in my client component? import styles from './page.module.css' import Button from "@/components/Button"; async fu ...
I encountered an issue with the following code snippet: export const getStaticProps: GetStaticProps<HomeProps> = async () => { const firstCategory = 0; const { data }: AxiosResponse<MenuItem[]> = await axios.post( ...
I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( <Tab ...
My current Next JS project involves a static JSON file stored in /pages/api/data.json. Here's how the data is structured: { "Card": [ { "title": "Title 1", "content": "Content 1" }, { "titl ...
I'm trying to use a post method on an API, but for some reason when I call the function it posts to the wrong path of the API. Here is the script I am using for the post: //Creating Order const createOrder = async (data) => { try { co ...
I've hit a roadblock here. Despite following the exact steps outlined in various posts and tutorials, I'm still stuck. I know the importance of using a cursor to set the first and last visible document for moving forward or backwards. When moving ...
I'm struggling to find a clear example of how to use the language tag with Next Head. Here are two examples I have come across. Can you help me determine which one is correct, or if neither are appropriate? Just a reminder: it doesn't need to be dynamic. ...
The Image above shows the error and the code I have attempted.Server Error TypeError: Cannot read properties of undefined (reading 'map') This particular error occurred during the page generation process. Any console logs will appear in the terminal windo ...
I need a solution for automatically downloading multiple PDF files from Google Drive and Docs using their URLs with JavaScript code. I don't want to manually go to each link to download the files. Although I've researched various answers on Stack Overflow ...
I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...
Encountering an issue when upgrading from NextJs 12 to 13 Uncaught SyntaxError: Invalid left-hand side expression in postfix operation _app-f8abd0a73b0d3a9f.js:1038 The error only occurs after building the project, but runs fine in dev mode. Any suggestio ...
I have been working on a page located at /article/[id] where I am trying to fetch an article based on the id using getServerSideProps. However, it seems that getServerSideProps is not being called at all as none of my console logs are appearing. Upon navi ...
Can Mantine dropzone be used with React hook form in JavaScript? I am currently working on a modal Upload using Tailwind components like this import { useForm } from 'react-hook-form'; import { Group, Text, useMantineTheme } from '@mantine/c ...
For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...
I am facing an issue while trying to construct a Next JS project with an imported WebAssembly module compiled using Emscripten. It appears that the problem lies in the WebPack loader's inability to import the .wasm module through the created .js file. Any ...
I am currently utilizing the Next-Auth Credentials provider for authentication purposes through our existing API. Following the guidelines provided at https://next-auth.js.org/configuration/callbacks the code snippet used is as follows: callbacks: { ...
Despite trying numerous solutions, I continue to encounter the error shown in the screenshot below... puzzled as to why? Server Error ReferenceError: window is not defined This error occurred during page generation. Any console logs will be visible in the ...
As a newcomer to NextJS with prior experience in basic React apps, I recently attempted to deploy a CRUD NextJS app (utilizing prisma and mongoDB). Everything runs smoothly with npm run dev, but issues arise when transitioning to npm run build followed by ...
What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...
I have implemented Next.js 13 with the App routing system, as shown in the code. I have a SSR function called FetchingProduct which calls an API to generate dynamic metadata and send data props to a client page component. There is a concern that the fetc ...
As I dive into the world of nextjs, I'm coming across conflicting information. Some sources claim that nextjs only prerenders the first page, while others suggest that all pages are prerendered by default. This contradiction has left me confused about ...
When using the Next.js Image component with the URL https://amandascookin.com/wp-content/uploads/2012/02/Crispy-Potatoes-680.jpg, I am receiving a 403 error. Interestingly, when testing the same in a nextjs code sandbox, it works perfectly fine. I'm unsure ...
I have Nextjs set up to handle APIs with a default route "api" in my pages folder, but I want to use endpoints from a different backend server address (eg: api.domain.com) instead of the default "api" route. Is it possible to do that? ...
Currently, I'm working on implementing the React context API in my NextJS e-commerce application to manage a user's shopping cart. The challenge I'm facing is how to retrieve the cart contents from MongoDB to initiate the cart context. This ...
I am facing an issue with my common useForm.tsx file when handling the onChange event for select controls. The error message I encounter is displayed below. Does anyone have any suggestions on how to resolve this? Error: Type '(e: ChangeEvent<HTMLInpu ...
As I delve into my new project, incorporating StyleX has proven to be a bit challenging especially when working with NextJS. I find myself grappling with configuring the "next.config.js" file without causing conflicts with the existing "babel.config.js" f ...
Seeking assistance with a 500 response issue in one of my Next.js API routes. My app is deployed on Vercel and I've configured the CORS using the vercel.json file as per Vercel documentation. All other API routes work fine, but there's an anomaly with thi ...
Answer: I finally solved the issue. The follow-along tutorial was outdated, and there was an update in the GraphQL API. I had to visit their API Playground and rewrite the code. I am working on a blog using Next.js with hygraph.com as the backend. I initi ...
I'm working on a React project where I have multiple pages. My goal is to have all the filters cleared whenever I navigate to any page other than the 'Football' page. Currently, the filters are retained when I switch between non-Football pages and only c ...
I started a new project using Next.js with TypeScript and created my first component. However, I'm facing an issue where the custom styling in the className does not seem to apply when viewed in the browser. Below is the code snippet: import Link from 'ne ...
I've been working on implementing a custom Okta widget for the sign-in process in my Next.js app. I have an Okta provider set up at /api/auth. When using the widget to log in, I redirect to http://localhost:3000/api/auth/callback/okta to pass necessar ...
After going through the documentation, I'm still unsure about the best approach for creating a nested route in NextJS. For example, I have modules with nested lessons. Think of it as a book with chapters. Currently, I am thinking of structuring my p ...
Encountering an error with the .create method on a mongoose model in Next JS while making a call in an API route. The get request is functioning properly... The structure: pages>API>task.tsx import dbConnect from "../../util/dbconnect"; im ...
While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...
Hey there, I'm working on a simple project using Nextjs. I need to access the state of my Redux store but I'm encountering an error when trying to use store.getState, it's throwing an error saying getState is undefined. Additionally, I have a basic vanilla ...
I'm having an issue with fetching data inside useEffect using axios as it fetches the data every time I change the page. Is there a way to prevent useEffect from triggering when changing pages? I attempted to use shallow push, but it did not work. Since I ...
I'm facing an issue deploying a Next.js app to Vercel, encountering this error during the build process https://i.stack.imgur.com/oj4XU.png Although I don't come across any errors when building locally, it triggers an error during the Vercel bu ...
Recently, I've been attempting to develop a frontend using nextjs that communicates with a Java backend. To achieve this, I'm utilizing the npm package next-http-proxy-middleware. However, it seems like either my request body is getting lost in transit or ...
Recently, I've been delving into the world of using sass with Next.js. After scouring through various documents, I finally stumbled upon a solution that involved running npm install -D sass. While I'm familiar with the fact that npm stands for node packa ...
My issue arises from the fact that, despite following the documentation, the middleware in Next.js is not functioning as I anticipated. I experimented with what I thought was the simplest middleware possible. I expected that when navigating to /, a conso ...
I am currently working on a project in next.js 13, where the only folder I have is named 'explore' and it utilizes dynamic routing. https://i.stack.imgur.com/COnbg.png Within the 'explore' folder, I am mapping over a list and using a ...
Having trouble setting a cookie in actions and encountering an error: Cookies can only be modified in a Server Action or Route Handler, even though I have them in the server action. The file path is located in app/actions.ts import { cookies } from " ...
Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...