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.
npm WARN using --force Recommended protections disabled. npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @material-ui/[email protected] npm WARN Found: [email protected] npm WARN node_modules/react npm WARN react@"^18.2.0" fro ...
I am currently embarking on my inaugural Nextjs project, focused on developing a basic blog utilizing the JSON placeholder API. Strangely, I am encountering an issue where the prop "posts" is being perceived as undefined. Can anyone provide assistance with ...
As I work on developing a web application with Next.js that includes a CMS for updating pages, my aim is to utilize the same codebase to build native iOS and Android apps using Capacitor - a WebView container technology (refer here). The current setup inv ...
An error has arisen in a Nextjs app with TypeScript, specifically in the line of my react component which can be found here. This is my inaugural package creation and after several trials, I managed to test it successfully in a similar vite and TypeScript ...
My current project uses Next.js 13 and is based on the Supabase database. I am attempting to fetch data from Supabase and assign it to a variable using useState, but encountering the following error: Argument of type 'any[] | null' is not assignable to par ...
I am interested in incorporating layout-based routing within my project's pages directory. I want to find a way to have a specific file, like the _app.tsx, that can only affect the files located inside a particular folder. This setup would operate similar ...
Can anyone help me with this issue I'm experiencing: 'window is not defined' error? useEffect(() => { const handleScroll = () => { if(typeof window !== 'undefined') { // scrolling dete ...
My goal is to optimize the body of a NextApiRequest for TypeScript. I currently have this code snippet: // This is a type from a library I've imported export interface NextApiRequest { query: Partial<{ [key: string]: string | string[]; ...
I have created a component called Card.js which is responsible for linking to dynamic pages when a card is clicked. My goal is to pass a value, such as 'category', to the dynamic page [id].js so that I can implement additional logic there. Card. ...
Currently, I am utilizing react-beautiful-dnd, MUI, and Next.js in my project. Although the example code appears to be very simple, it is not functioning as expected. Instead, it displays as shown in this image: https://i.stack.imgur.com/Y9kye.gif ...
i am attempting to retrieve the user_metadata using the useUser hook. Here is my approach. Authentication Action: exports.onExecutePostLogin = async (event, api) => { const namespace = 'https://my-tenant-auth0.com'; api.idToken.setCustomC ...
My challenge involved proxy passing multipart/form-data through NextJS API routes, but the default built-in bodyParser was causing issues with incoming multipart data. Other plugins for NodeJS were also not allowing me to successfully proxy pass clear byte ...
The issue with Next.js Image not working on the server but working fine on localhost has been puzzling me. My assumption was that it could be related to permissions, as I fetch images from a third-party domain. However, when I load images using a regular ...
I'm currently working on a project that involves postgreSQL and Prisma. While debugging in getServerSideProps(), I noticed that Prisma is automatically console.logging long strings like the following: prisma:query SELECT "public"."TaskChar ...
I've been searching everywhere, but I can't figure it out. My goal is to place a TextField element next to a label (and not inside or touching the border of the TextField) like in this image: Desired Result Label <____> TextField This sp ...
Currently, I am facing an issue with a simple map function in React that is supposed to create a set amount of times. {times.map((time) => ( <Pill value={time} handleTimes={handleTimes} key={time} /> ))} The error being thrown i ...
I encountered this specific error message: The className property did not match. On the server: "jss1 jss5" Client side: "makeStyles-root-1 makeStyles-root-5" This issue only arises when deploying to Heroku. Locally, everything runs ...
I'm a bit lost on how client components function. I am working on an image uploader project where I need to extract the userId from supabase, utilize the supabase server function, and then upload the image to supabase storage with the "userId/filename ...
Having trouble with cookies on my NextJS app. After sending an Http-Only cookie in the response to a /login request, I expected it to be saved in the Cookie storage and accessible via req.headers.cookie in ServerSideProps. However, the cookies are not bein ...
I've been working on this issue and have tried various methods, but haven't had any luck so far. Despite reading through a lot of documentation and posts, I can't seem to figure it out. What I need is for a message sent to a specific user (usuarioActual.u ...
I am currently facing an issue with my Next.js app. The package.json file specifies "next": "^10.2.0", which includes shell-quote as a transitive dependency version 1.7.2 - known to have critical security vulnerabilities. To address this, I need to update ...
Currently, I'm developing an application that allows users to create posts and mention other users by using hashtags in the post. When retrieving the list of posts through an API call, the challenge arises on how to wrap these hashtags and usernames w ...
Currently, I am developing a project on Next.js 14 and utilizing Clerk for authentication. In the Navbar component, I am using useUser() as shown in the following code snippet (This code belongs to the UserMenu.tsx component imported in NavBar.tsx): import ...
I've been attempting to utilize plugins in puppeteer-cluster, but I'm facing an issue. Interestingly, it works fine without the plugins, but as soon as I add them, things start to go wrong. Below is a snippet of my code: import { NextResponse } from " ...
I'm currently facing a challenge with my script in NextJS/React where I am finding it difficult to save state and reuse data in a variable. import React from 'react'; import Head from 'next/head' import Image from 'next/image' import axios from 'axios'; im ...
I'm currently utilizing next-translate. The default recognition of my routes is as follows: /about <--- /de/about /es/about However, I would like to set a specific locale for all paths: /en/about <--- /de/about /es/about Below is ...
When I make a request in the client using axios, it looks like this: const handleSave = async () => { try { await axios.patch(`/api/mongo/users/${params.id}`, editedUser); // Updating specific fields with a PATCH request } catch (error) ...
I am currently developing an app using React with next.js. There is a GraphQL query that I need to run in order to retrieve some data, but I seem to be encountering some issues. When I use the useQuery hook as shown below, it successfully returns the res ...
I recently implemented some fixed tabs on one of my web pages. By making the tabs fixed, users can now smoothly scroll down each tab page without having to move the navigation tabs. Prior to fixing the tabs in place, I was able to scroll horizontally thr ...
After implementing meta tags using Next.js's built-in Head component, I encountered an issue where the meta tag details were not showing when sharing my link on Facebook. Below is the code snippet I used: I included the following meta tags in my inde ...
After reviewing their documentation, I discovered that when using a local image (e.g. from the public/ folder), specifying the width and height of an image is not necessary. Here is an example of how my setup is configured: import Image from 'next/Image' ...
Encountering an issue where the app works fine in development mode but encounters problems in production mode. When running in production mode either locally or on Vercel, the session token is missing upon page refresh. However, switching browser tabs or o ...
I'm encountering an issue with turbopack and @svgr/webpack in my project. According to the documentation, they should work together but it's not cooperating. When I run the project without using --turbo (turbopack), everything functions as expected. Howev ...
Whenever I include "use client" at the top of my component, I encounter the following error: event - compiled client and server successfully in 2.5s (265 modules) wait - compiling... event - compiled client and server successfully in 932 ms (265 modules) ...
Currently, I am developing an e-commerce application using next.js with Typescript and MongoDB. To better understand my project, let's take a look at my existing file structure: https://i.stack.imgur.com/tZqVm.png The mainPage.tsx file is responsibl ...
I'm currently working on a basic tool in NextJS that uses puppeteer to fetch web vitals data from a given URL. However, I'm facing an issue where the results are not being printed out. What could be causing this problem? const browser = await puppeteer.l ...
I've been working on setting up a Leaflet map in the new NextJS 13 environment, hoping that with the explicitly declared client-side functions it would make things easier. However, I'm having trouble getting it to work. Here is what my map component looks ...
Hey there everyone! I'm facing a challenge that I could use some help with. Our setup involves using a NextJS app with SSR as our Frontend for services, and we're looking to deploy everything on AWS App Runner using docker images. The problem we're encount ...
Upon setting up a fresh next.js project using npx create-next-app@latest and configuring some environment variables in the .env.local file, I encountered an error when attempting to run the server. "Failed to load env from .env.local TypeError: Cannot ...
I am currently using next-auth along with a Firebase adapter for authentication, but I am uncertain about the correct way to sign in users. I do not want to utilize my Google account for signing in; instead, I have user accounts within a Firebase project a ...
Currently, I am utilizing Next.js for the development of a React application. In order to manage the state, I have integrated redux along with redux-toolkit. A peculiar error has surfaced in the console with the message: Warning: Did not expect server H ...
warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0f181c1e095009120d5011121c1914131a501f1c0f3d4f534c534d">[email protected]</a>" has an incorrect peer dependency "react@^16 || ^17" ...
I've created a SCSS library located in the styles/ folder with code like this: // Variables $path-to-img: "/img" !default; $path-to-fonts: "/fonts" !default; // Example use case .bg-pattern-2 { background-image: linear-gradient(to bo ...
I am currently using Next.js Here is the structure I have: https://i.stack.imgur.com/jRQBS.png I am in need of opening the same component for multiple URLs, such as 'http://localhost:3000/hakkimizda', 'http://localhost:3000/cerez-politikasi', 'http://lo ...
I've successfully developed a nextjs app with redux wrapper. class MyApp extends React.Component<AppProps> { public static getInitialProps = wrapper.getInitialAppProps(store => async ({ Component, ctx }) => { Now I'm in the p ...
I'm currently working on a dynamic website that aims to load a random header component upon each refresh. Despite my various attempts, the functionality operates smoothly during the initial load but consistently throws this error on subsequent refresh ...
I am currently exploring options for executing code upon the initial page load of each request. My goal is to determine the domain of the request and redirect to a specific section of the website based on this information. One possibility I have considere ...
I am currently utilizing Node.js and Front-end on Next.js. I have a GraphQL server with a GetUrl method that returns a link (for example: ""). My goal is to redirect a client who made a request to that page with a Basic Auth Header. From what I understan ...
Currently utilizing NextJS for Server-side Rendering Our authentication method involves the use of JWT In a standard React application, we can employ JWT for each server request to retrieve data However, some pages return varied data based on whether th ...
Hey there! I could use some assistance with the following issue: Objective: I am looking to filter data based on department content. My goal is to retrieve data from MongoDB based on your job title or department. For instance, if I belong to the Email Tea ...
I have decided to upgrade my swr package from version 1 to the latest version 2. Here is a glimpse of my package.json. I am currently utilizing React 18, NextJS 12, and Webpack 5 for this project, including the ModuleFederationPlugin integration. { " ...
I recently upgraded to NextJS 14 and encountered an issue when deploying my project on Vercel. The next.config.mjs file in which I wrapped my nextConfig in two plugins seemed to prevent the build from completing successfully. As a workaround, I decided t ...
Is anyone here utilizing NextAuth for their authentication needs? I find the email provider sign-in method to be quite simple. However, I am struggling to figure out how to enable users to send invite links to add team members. These links should also in ...
Welcome to my page import { InferGetServerSidePropsType, GetServerSideProps } from 'next' import ProductList from '../../component/product/ProductList' export interface Item { title: string price: number } const products ...
This project is built using Next.js and utilizes a MongoDB database. Initially deployed on Vercel, everything was smooth until I integrated translations with next-i18next. The persistent mongoose error prompted me to switch to an alternative database provi ...
I currently have a Jupyter notebook that is able to process a PDF file, execute an LLM model, and provide a summary of the content. I am considering creating a web application where users can upload their PDF files, send them to the Jupyter notebook for p ...
Are you familiar with targeting window.location.pathname in NEXT.JS? I encountered a red error while using this code in Next.js const path = window.location.pathname console.log(path) // I am able to retrieve the pathname here Then { ...
I am currently developing an app using Next.js 13 and Supabase for the backend. I have been facing a challenge in determining the most effective way to create a context or provider for the logged-in user. The process of retrieving the user from Supabase i ...
I'm currently working on implementing a sidebar component for my app using mantine.dev, along with next.js layouts to ensure it is displayed on every page. The links within the sidebar are functioning properly, however, I am facing an issue where the actua ...
I'm currently working with Next.js and I'm trying to map an array of elements to Material-UI chip components. However, when I compile the code, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or ...
Currently working on a project using the Next.js framework and facing an issue where the First Load JS shared by all pages is quite heavy. I am looking for advice on possible strategies to reduce the weight of the JS file, and also wondering if there ...
Whenever I try to add a new component to my Next.js project, I encounter an error that displays the following: `./components/GridMember.js Error: error: Return statement is not allowed here | 6 | return (test); | ^^^^^^^^^^^^^^^^^^^^^^^^^ Caused ...
After setting up a basic next.js application, both with the nextjs-blog starter and a generic nextjs application, I encountered an issue when running "npm run dev." The command seemed to hang for a moment before abruptly closing. Visiting localhost:3000 on ...
My application has a signup feature that requires users to input their email address, which is then added to the database using FormData. I am interested in simulating rate limiting using only the fetch API. Is there a way to achieve this without relying ...
After creating a new file called not-found.tsx on top of the default file from create next app, everything seems to be working fine. However, I keep getting an error message in the console every second. Furthermore, when I try running the next app with ne ...
I am currently facing an issue with styling my React/Next component. Despite trying to apply a stylesheet to enhance its appearance, the CSS doesn't seem to be taking effect. Could someone please provide guidance on how I can resolve this? I have att ...
Encountered the following error message: Error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at ReactDOMServerRenderer.render ... This issue arose when integra ...
I have a current project where I am tasked with filling a template.tsx file with the information gathered from a form, and then using that data to create an HTML file which can be downloaded to the user's device. Does anyone know how I can accomplish this ...
Currently, I am utilizing next-auth version 4.18.8 on my login page for the final project of my Fullstack JS course. It's worth noting that a more recent version is being used compared to what was taught in the course (next-auth v. 3). Upon entering the c ...
Currently, I'm utilizing a tutorial to create a custom JavaScript calendar and integrating it into a React project You can find the functional JavaScript version in this jsfiddle import { useState, useRef, useMemo } from 'react' import type ...
Using Stripe Payment Element I am tasked with integrating Stripe payment for a client, but they specifically do not want the card icons (MasterCard, Visa, etc.) to be displayed. After attempting to hide them using Elements Appearance API without success, ...
My goal is to showcase my code syntax utilizing next-mdx-remote on my Nextjs website. I'm fetching my markdown content from graphcms and displaying it in the following way: import { serialize } from "next-mdx-remote/serialize" import { MDXRemote } fr ...
I am facing a major issue with this persistent error that I can't seem to resolve. *Disclaimer: As a junior, I am still learning the ins and outs of NextJS, so please bear with me if I make any mistakes while asking this question. Currently, I am using t ...
I am facing a challenging issue with implementing a Material UI slider in conjunction with Redux. Below is the code for the slider component: import { Slider } from '@material-ui/core' const RangeSlider = ({handleRange, range}) => { ...
Having trouble submitting a form with a dropdown list. Formik doesn't seem to recognize the values from the options for some reason, and I'm not sure how to resolve this issue. const [value, setValue] = React.useState(""); const handleChange = (e ...