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.
Currently, I am working on a user creation form for my Next.js front end project using TypeScript. The main goal is to allow an administrator to create new users by filling out a simple form which will generate a basic user object. Here is the structure of ...
I have successfully created two components, a header and a footer. I have been able to call the header component directly in the index.js file and it is working fine. You can see the header section displayed below: enter image description here Now, my iss ...
I am currently running tests on a Next/React project using Jest with Node. I have also implemented cross-fetch in my project. However, I encountered an issue when trying to mock cross-fetch for a specific component: import crossFetch from 'cross-fetch' je ...
I'm attempting to implement pagination using Joy/Material UI, but I'm running into an issue where even adding a simple <Pagination /> tag is resulting in an error. I am working with Next.js. Below is the code snippet that I have: import Layout from ...
Recently, I made the switch to TypeScript in my NextJS project using Create T3 App. One of the components in my app involves updating the state after a Prisma mutation is performed. I attempted to pass the setItems (which was initialized with useState) to ...
Once the cookie is set, I am unable to retrieve it in the middleware without having to refresh the page first. Why does this occur? The cookie is being set as shown below: import { getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next&a ...
I am completely new to stress testing, just letting you know. A bit of background information about the project, not the question itself: I have a web app built in nextjs14. A client has requested that it be able to support 400-500 simultaneous users conn ...
I'm facing an issue with a simple task - I want to log something to the console when a button is clicked, but it's not working as expected. I am utilizing the Next.js web app template by Startup Agency and can't figure out why it's not logging to the conso ...
As I delve into my latest Next.js project, I've encountered an issue with certain pages that have cache headers configured as cache-control: no-cache, max-age=120, must-revalidate. Surprisingly, despite these settings, CloudFront seems to be consistently ...
Currently, I am working on a React/Next.js project and incorporating MUI for the design elements. <Link href="/products"> <ListItem disablePadding> <ListItemButton> <ListItemIcon> ...
Currently experimenting with the next-i18next package within a Nextjs project. Encountering an issue specifically on dynamic pages like: /blogs/[id], where i18n seems to struggle to translate the content properly, displaying keys rather than actual transla ...
I've incorporated the TextField and MenuItem components from Material-UI into my next.js project. By setting the "select" prop in the TextField, it utilizes the Select component internally. However, I'm facing an issue where the dropdown jumps on the scr ...
I have a variable that stores key/value pairs of names and components in a TypeScript file. // icons.tsx import { BirdIcon, CatIcon } from 'components/Icons'; interface IconMap { [key: string]: string | undefined; } export const Icons: IconMap = { b ...
Having trouble verifying the request signature in my Stripe webhook endpoint. I keep encountering this error: No signatures found matching the expected signature for payload. Have you passed the raw request body received from Stripe? I've experimente ...
I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...
Hey there, team! Our usual practice is to validate the input when a user touches it and display an error message. However, when the user clicks submit, all fields should be marked as dirty and any error messages should be visible. Unfortunately, this isn&a ...
I just started using Next.js and decided to try out an example. Here is the project structure: src --app -- page.tsx --components Currently, routing localhost:3000 directs to app/page.tsx. Now I want to add a new page folder with an index ...
When attempting to render the hostedFields from Braintree, I encounter an issue. After creating a key and obtaining my token, I pass it to my function to create the hostedFields. However, I am faced with an error message stating client.getVersion is not ...
I found a code example on the Tailwind website. However, when I changed the file extension to .tsx, I encountered an error related to the className attribute. Do I need to specify a type for the className variable? What steps should I take to resolve thi ...
Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...
Within my card component, I have included a Next.js Link that contains the body and footer of the card. The cardFooter section consists of an Ant Design DropDown menu with two items - Share and Report. Despite implementing preventDefault and stopPropagatio ...
I am currently working with next.js and attempting to implement middleware. My goal is to restrict access to certain pages, such as the profile page, if the user does not have a valid token stored in their cookies. However, I seem to be encountering an iss ...
Error: (0 , tanstack_react_query__WEBPACK_IMPORTED_MODULE_3_.useQuery) is not a function While implementing data fetching in my Next.js project using @tanstack/react-query, I encountered the above error message. Below is the code snippet where the issue ...
I'm encountering a simple issue with calling an external API: const fetcher = (...args) => fetch(...args).then(x=>x.json()) const {data:{results}, error} = useSWR("https://xxxxxxxxxxxxxxxx",fetcher) Every time I attempt to destructure th ...
Is there a way to conduct end-to-end testing for OTP login? I have implemented OTP login functionality and now want to create a Cypress test that simulates a user entering the OTP received via email. How can I write a test for this when the OTP changes ev ...
Question regarding nextjs page middleware: the documentation states that the request object should include geo, IP, ua, cookies, and nexturl properties. Visit the link for more information. I am attempting to retrieve the user's location using page middle ...
One of the reusable React components I have is: "use client"; import { useState } from "react"; import { ColumnDef, flexRender, ColumnFiltersState, getFilteredRowModel, getCoreRowModel, getPaginationRowModel, ...
Just starting out with nextjs, I'm sticking to using only the basic features without diving into any advanced functionalities. During the next build process, I encountered an issue where 6 paths failed because of a ReferenceError: window is not defin ...
Encountering an error when deploying a Next.js app to Netlify can lead to deployment failure. The specific error message "Deploy directory 'out' does not exist" is a common issue that users face. ──────────────────── ...
I'm having trouble using FormData on Next.js to upload an image to the server as I keep getting this error. I've tried various solutions but haven't been able to resolve it yet. This is my code: const changeValue = (e) => { if (e.target ...
Could anyone please help me with setting the OTP expire time in Next.js using Firebase? I have searched through the Firebase documentation but haven't been able to find a solution to my issue. Below is the code I am using to send the OTP: const appVerifi ...
I have created an administrative dashboard using Next.Js. My goal is to implement the following functionality: When a user logs in through the /login route Show a loading screen while processing the login In the / route, if the user exists, the app will l ...
Within my test.tsx file, I have the following code snippet: test('Photos will load', async () => { const mockCuratedPhotos = jest.spyOn(endpoints, 'getCuratedPhotos'); mockCuratedPhotos.mockResolvedValue(mockPhotos); await render(<Home / ...
I'm currently involved in a project that utilizes Next.js and styled-components. In my [slug].tsx file: export default function ProductDetails({ product }: IProductDetailsProps) { const router = useRouter(); if (router.isFallback) { return ( ...
I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...
I am facing the issue of not being able to access my .env variables such as GraphQL URL and access token in a 'use client' Apollo context wrapper component that is rendered client-side. Is there any solution for this in Next.js v13? Here is the code snipp ...
Currently, I am working on a web application that utilizes next.js and FusionCharts. Within the app, various FusionChart types have already been set up. My task now is to integrate the Overlapping Bars chart as outlined in the following documentation: How ...
I am facing an issue with two components in Next.js. Let's call them <Navbar /> and <SearchResult />. The <Navbar /> includes a search bar where users can search for items, and a Search button. When the user clicks on the Search button, ...
After setting up a monorepo for a NextJS + Expo React Native cross-platform application using Solito (), I successfully deployed both web and iOS apps. However, I encountered a build error in the Expo iOS app after accidentally wiping my local repository a ...
Struggling with implementing auth logic in my next.js project as I try to teach myself the framework. I have a specific page, protected/profile, that should only be accessible to logged-in users. To achieve this, I am fetching user data in getServerSidePr ...
I am currently developing a project using NextJS and integrating AWS Amplify for authentication with Amazon Cognito. However, I am facing an issue where an error message saying "Auth UserPool not configured" pops up when attempting to log in or sign up. I ...
Encountering an error while attempting to create a basic route in app/dashboard/page.tsx. The error message suggests that the contents are not a valid react component, even though they conform to valid react component syntax. Unhandled Runtime Error Erro ...
I have a layout similar to this export type CameraProps = Omit<React.HTMLProps<HTMLVideoElement>, "ref"> & { audio?: boolean; audioConstraints?: MediaStreamConstraints["audio"]; mirrored?: boolean; screenshotFormat?: "i ...
In my next js app, I am utilizing MUIDatatable with server-side pagination. The issue I am facing is that even though the data is correctly returned by the API for each page change, it only displays on the first page. When I try to navigate to the next pag ...
I have a URL that looks like this: manage/text_U2FsdGVkX1/7AucFzVPX7OpRHb8Dlk/ApiJsTvYroROv4Ds4oshwC+cg3a7Mz/aO This URL needs to be processed by the route/directory /pages/manage/[id] The ID is test_someEncryptedString However, because of the forward s ...
I'm struggling to implement the tsParticles library (specifically using react-tsparticles) in combination with the latest version of Next.js. However, when I try to use the particle.json file and bind it to the <Particles/> component, the partic ...
Simply put, the main issue revolves around my usage of Sanity as I delve into learning it. While referencing their documentation at , they make use of getStaticProps. Unfortunately, with my utilization of Next.js 13.2 experimental app directory, this speci ...
I am looking to integrate the npm package next-images into my nextjs application. Upon reviewing the documentation for next-images, it advises creating a next.config.js file with the following code snippet: const withImages = require('next-images&apo ...
Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...
I am currently using NextJS 13 and facing an issue with printing an unordered list in Next.js. <div className="w-7/12"> <div className="tracking-wide"> <p className=&apo ...
After implementing useImperativeHandle from the Input Component to transfer ref data to the Login Component, I encountered an issue where the emailInputRef data was delayed compared to the inputRef data. const Login = () => { const router = useRouter( ...
In my current project using React Typescript Next and prisma, I encountered an issue while trying to create a user with an initially empty array for the playlists field. Even though there were no errors shown, upon refreshing the database (mongodb), the pl ...
Recently, I came across the next.js technology and encountered an error. Can anyone help me solve this issue? What could be causing it?View image here import React from 'react' import Button from "../components/button" function HomePa ...
It's been quite a while now that I've been stuck on this issue. Despite being in a learning phase, I find myself unable to progress due to this specific problem. While links and text elements are functioning properly, I have encountered difficul ...
As a newcomer to Next.js with some knowledge in JavaScript, I am trying to fetch data from an API using the code snippet below. The goal is to display this data on the /blogs webpage: import React from 'react' const blogs = () => { var element (async ...
My NextJS monorepo app is in the following state: The monorepo contains multiple private packages managed through yarn workspaces develop serves as the default branch and testing environment with several commits ahead of main main branch has fewer commits ...
My current project involves using Next.js with Tailwind CSS and MDX for certain pages. Within an MDX file, I have the following export line: export default ({children}) => <div className='prose'>{children}</div> This particular li ...
I've been attempting to incorporate Zurb Foundation's scripts into my next js application, but I keep encountering an error message when trying to include the Foundation core. The error I'm seeing is: /Users/alasdair_macrae/Sites/merlin/spa_ ...
Is there a way to streamline passing a handleClick function to the son component so that it does not need to be repeated? The code in question is as follows: Mother Component: const Mother = () => { const [selectedOption, setSelectedOption] = useSt ...
I'm currently working on a project using React.js and Next.js. I'm encountering an issue with handling the Axios response in Next.js as it's displaying "[object Object]" instead of the actual response data. How can I properly handle the resp ...
On my webpage, I have a headerbar that changes size (from 120px to 70px) when the user scrolls down. I successfully implemented this transition using Tailwind classes and a height transition. Now, I am trying to make the site logo resize along with the hea ...
When working with NextJS's getStaticProps, I am implementing a library that is only utilized during build time. Should this library be categorized as a regular or development dependency in my package.json? ...
In my next.js project, I am using next-int to set up languages. Typically, I have components with a module.scss file each. However, I want to avoid duplicating my scss files for styling the Arabic version of my site. The main differences come down to align ...
I am capturing a user's fingerprint in the browser using the following code: "use client" import FingerprintJS from "@fingerprintjs/fingerprintjs" import { useCookies } from "next-client-cookies" import React from "react ...
Has anyone else encountered issues with data caching in Next.js 14? I have a page (/lib/fetchData.js) where I'm attempting to implement caching, but it seems like the data is always being fetched from the source instead of the cache. Any ideas on what co ...
Recently, as I began deploying to Vercel, an issue arose where I needed to constantly check for errors during the build process. Strict TypeScript errors and messages like "Can't use <img> tag, please use next/image" kept cropping up after each ...
I've managed to establish a successful connection between my custom server using Node.js and Express.js with Next.js. The issue I'm facing is when trying to fetch a specific car by its id upon clicking it among other cars, as I keep encountering an error i ...
My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data to ma ...
Currently, I am utilizing SSG with Next.js and executing "next export" to generate static files in the /out folder. However, upon deployment of the application, I notice an influx of HTTP GET requests from router.js. https://i.stack.imgur.com/Gr6dU.png Th ...
I am encountering an issue while deploying my Next.js 13 app. The error message states: Module not found: Can't resolve 'encoding' in '/vercel/path0/node_modules/node-fetch/lib' Additionally, I am facing a "Next Router not mounted" error. Error: NextRout ...
On my hero section, I have implemented some animations using framer.motion that I only want to display on the initial load. To achieve this, I attempted to use useState and useEffect along with local storage to keep track of whether or not the animations ...
https://i.stack.imgur.com/8RGS3.png https://i.stack.imgur.com/FRTOn.png Hey there! I'm currently experimenting with using Tailwind background colors in my Next.js project. However, I'm facing an issue where the background color is not being applied to com ...
I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...
In my finance application, I am creating a balance overview feature. To display the content, I pass props into a single <BalanceEntry> component and then map all entries onto the page. With Framer Motion, my goal is to animate each rendered <Bala ...
I am facing an issue with my NextJS application that connects to a database through the API. During development, I store my environment variables in a .env file which contains the host, port, username, password, and database details. When I run npm run dev ...