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.
Running Nextjs (frontend) and PHP (backend) on my dedicated server has been smooth sailing until reaching 200 users. Now at this user threshold, Nextjs experiences timeouts from the APIs while they still function properly. It appears that LiteSpeed may hav ...
When I load a new page using the nextjs router, it doesn't work properly as the new page appears blank. There seems to be no client-side or iframe-based navigation redirection happening. Although I have been able to navigate from page to page using Polari ...
Lately, I've noticed a lot of changes in the way next.js handles image sizing across different versions. Currently, I'm on version "next": "13.4.4", and I'm looking to create responsive images that take up 20% of the screen width while ...
After integrating next-i18next into my Next.js project using the official guide, everything appeared to be functioning correctly. However, I encountered a 404 error when switching from the default language (Italian) to English and navigating to the detail ...
I am facing an issue with rendering all the returns from the API in my Next.js application. The API, which is created in Strapi, is only displaying 1 out of the 3 possible returns. I am a beginner when it comes to using APIs and I suspect that the issue li ...
Hey, check out this component I created: import * as Styled from './styles'; export type HeadingProps = { children: React.ReactNode | string; colorDark: boolean; }; export const Heading = ({ children, colorDark }: HeadingProps) => { re ...
I am currently working on a project where the user is required to select a form and will be redirected to the appropriate form page. The folder structure I am using is as follows: patients/[patientId]/forms/type1/[type1Code] patients/[patientId]/forms/t ...
I have encountered an issue with next auth in my next.js project. During development, the session data is lost if the server refreshes or if I switch to another tab and return to it. This forces me to sign out and then sign back in to restore the session d ...
I am facing an issue with toggling the input type between password and text to display the password in a login form. The expected functionality is that clicking on the eye icon next to the password input should reveal the password in plain text, but this i ...
In a specific scenario, I need to be able to choose users from a dropdown menu. Once a user is selected, the app should display that user's data. Upon loading the page, the app fetches the data for the first user in the array allUsers?.[0]: const [userSel ...
Currently, I am in the process of developing an application with Next.js and incorporating multiple root layouts from the official documentation at https://nextjs.org/docs/app/building-your-application/routing/creating-multiple-root-layouts. This was neces ...
I encountered a problem with my project after trying to implement dynamic routing. Initially, everything was working fine locally and during deployment. However, when I attempted to incorporate dynamic routing, errors started to occur. Unfortunately, I am ...
If you're embarking on a new project using NextJs and TypeScript, chances are you may encounter the following error: Failed to load config "next/core-web-vitals" to extend from. Wondering how to resolve this issue? ...
Below is the code I use to remove a user: const [selected, setSelected] = useState<string | null>(null); const DELETE_USER = gql` mutation RemoveUser($_id: String!) { removeUser(_id: $_id) } `; const [removeUser, { loading, error }] = useMut ...
Looking to retrieve the user-agent within getStaticProps for logging purposes In our project, we are implementing access and error logs. As part of this, we want to include the user-agent in the logs as well. To achieve this, we have decided to use getSta ...
I developed a web application using Next JS that runs smoothly with npm run dev. However, when I attempted to run it in production mode with npm run build, I encountered the following errors. I tried adjusting the permissions of the node_modules director ...
I have been encountering an issue where my code is supposed to return an empty object of a product but instead it just keeps loading forever. I have thoroughly checked through the code and explored every possible scenario where an error could be occurring, ...
I am looking to set up my Next.js application as a sub-application under an existing IIS website. Although I have successfully hosted the Next.js app as a standalone website, I need assistance in configuring it as a sub-app. The reason for this setup is th ...
After following a tutorial on YouTube (link here) about uploading a PDF file to an Express server and extracting its text content, I encountered an issue. My main concern is extracting the text from the PDF rather than displaying it. Everything works smo ...
Currently, I am in the process of developing a web application using Next.js and Tailwind CSS. My goal is to pass a set of data between methods by utilizing useState. However, I have encountered an issue where the application loads indefinitely with excess ...
I have been facing an issue with my Next.js project. It runs smoothly on localhost, but I encountered a problem when trying to deploy it on Vercel. Below are the errors that I received: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! ...
Currently, I am utilizing the following dependencies: "next": "14.1.0", "next-auth": "^5.0.0-beta.11", "next-themes": "^0.2.1", In my project directory's root, there exists a file named middlewar ...
As I delve into the world of React and Next.js, I find myself working on the link component. Initially, I had a grasp on basic routing in next.js which seemed pretty straightforward. However, things took a confusing turn when I stumbled upon this code: imp ...
Here is the API file I have created : import type { NextApiRequest, NextApiResponse } from 'next/types' import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res:NextApi ...
Currently, I am working on developing a basic Twitter clone using Next and TRPC. While tRPC is up and running smoothly, I am looking to streamline my code by consolidating it all within the src directory. However, upon moving everything, I encountered an i ...
Encountering the following error message: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) This issue occurred during the page generation process. Any console logs will be shown in the terminal window. https://i.stack.i ...
Recently, I integrated styled-components into my Next.js application. To make it work, I had to include a Babel file with the following code: { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true ...
While attempting to change the state of my cursor in a Next.js app using useContext, I encountered the following error: TypeError: Cannot destructure 'Object(...)(...)' as it is undefined. The goal is to update the state to isActive: true when h ...
Is it possible to utilize useState (and other react hooks?) with Server Side Rendering? I keep encountering the following error when attempting to execute the code: TypeError: Cannot read property 'useState' of null. Oddly enough, if I disable the getSe ...
During development mode, an unexpected issue arises with next.js. I have a shared event bus that I want to utilize in multiple API calls (one of which is a websocket handler, though it's not significant in this context) The global variable gets initializ ...
Currently, I am developing a list page using next.js 13 to display a collection of projects. I made an attempt to enable server-side rendering for this feature. The implementation is located in app/team/page.tsx import { useRouter } from 'next/navigation ...
I am currently working on a form that has a transition effect However, I encountered an issue: check out the problem here My goal is to keep the magnifying glass fixed in place while the form moves Here is a snippet of my code: import Search fro ...
I am currently working on a Next.js project with Firebase as the backend database. Within this project, there are multiple pages such as visitors.tsx, issues.tsx, and index.tsx (which serves as my login page). Upon logging in to the application, I am direc ...
When attempting to access a /Dashboard page after logging in through Gmail or GitHub on the client side using callbackUrl, I am encountering a 404 error stating that the page could not be found. The project directory structure for the relevant files is as ...
I'm facing rendering problems and would greatly appreciate any assistance. I attempted to use useMemo and useCallback, but it resulted in the checkbox breaking. Within a component, I am displaying information from an object. Let's consider the following ob ...
I am facing an issue while trying to build a docker image using the docker build . command in my next.js app An error is being encountered Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete su ...
I need to parse the JSON data in UTF format and output it to the terminal. import * as fs from 'node:fs'; export default function readAndDisplayJson(req, res) { fs.readFile("/blogdata/how-to-learnjavascript.json","utf-8",(err,data)=>{console.log(da ...
When sharing a link on platforms like Discord and Slack, an issue arises where a URL preview is generated by sending a request to the link. The link structure in question is as follows: www.domain.com/ctg/[...ids]. https://i.stack.imgur.com/Nl8MR.png Wit ...
My current setup involves using eslint in conjunction with nextjs and eslint-config-next. I prefer to use bun as my package manager, although similar issues have been reported with npm and yarn. I did not introduce any new packages, but after executing bu ...
My file currently contains keys for each child component, but it is still raising an error internally. I am unsure if I can resolve these issues on my own. export default function SecondaryNav(props:NavItems) { const router = us ...
Previously in v3, you could define "createHandler" like this: export default async (req, res) => { await startServer; await apolloServer.createHandler({ path: "/api/graphql", })(req, res); }; However, in v4, this is no longer possi ...
I'm encountering an issue while trying to fetch and display lists of my content on a simple blog. Every time I attempt to run the code, it gives me a CORS error message stating that my request has been blocked. It's frustrating because all I wan ...
I have a task where I need to run a shell script on my server and retrieve the resulting string after execution. The condition is that this script should only run when a specific button in my ReactJS application is clicked. After spending a considerable a ...
When working with getServerSideProps, I found a way to set multiple cookies on the client device. This is the code snippet that I used: https://i.stack.imgur.com/Kbv70.png ...
I've recently delved into Typescript and encountered a roadblock. While I successfully tackled the issue in JavaScript, transitioning to Typescript has left me feeling lost. My dilemma revolves around fetching data from an API and populating a table using ...
As I work on developing a SaaS application with Next JS, my goal is to leverage SSG for SEO purposes on landing pages and pricing. However, when it comes to the actual application, I prefer using a SPA due to its high interactivity. Initially, I am relucta ...
Is it possible to push updates for non-critical files like a README without triggering a full project redeployment on Vercel? I know about the Ignored Build Step option, but I'm looking for a way to specifically update certain files. How can this be achi ...
https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...
Recently delving into RLT, I encountered a strange issue while attempting to write a unit test for an input box. The RTL does not seem to update the state for the input value correctly. Below is the code snippet I used for testing: import { fireEvent, scre ...
I am having trouble getting styles.nav__item to work properly in the code snippet below. Can someone help me fix this so I can continue styling? import Link from "next/link"; import React from "react"; import styles from '../styles ...
I have a Python-based Firebase cloud function named hello_world_fn: from firebase_functions import https_fn from firebase_admin import firestore import google.cloud.firestore @https_fn.on_request() def hello_world_fn(req: https_fn.Request) -> https_fn. ...
My Dockerfile is quite simple: FROM node:16 COPY . . RUN npm install CMD ["npm", "run", "dev"] This Dockerfile runs a NextJS application. However, I am facing an issue where I need to make two CURL Requests from the container but using them in the CMD c ...
Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...
Encountering an error on Vercel during the build deploy process. The error message says: https://i.stack.imgur.com/Wk0Rw.png Oddly, the command pnpm run build works smoothly on my PC. Both it and the linting work fine. Upon inspecting the code, I noticed ...
Need help with this title. This is my Next JS project and I am working on a custom breadcrumb component. Everything seems to be going well so far, but I am facing an issue with the /people page followed by the /people/roles page. I want to extract only the ...
While developing a web application using next js, I have encountered an issue with Router Push. It redirects to the login page successfully, but upon redirection to the login page, I am receiving double notifications. Can someone help me identify and fix t ...
It looks like the posts array is coming through as expected, as shown below: posts: [ ] 0: { } 1: { } 2: null 3: null 4: { } I'm a bit puzzled by the presence of null values. I am integrating NextJS with headless WordPress. Does anyone have any insights o ...
Imagine a scenario where you have developed a chat app similar to WhatsApp Web. In this app, the chat section displays all chats on the left and in the middle. Upon user login, the first contact is saved in the Redux store as selectedChatUser. All the cha ...
Having an issue with the getStaticPaths function. Every time I attempt to create a dynamic display using a parameter, it gives me an error message: A required parameter (id) was not provided as a string in getStaticPaths for / movies / [id]. However, if ...
I'm still trying to wrap my head around Aframe. I managed to load it, but I'm having trouble using the tags I want, such as and I can't figure out how to load a model with an Entity or make it animate. Something must be off in my approach. ...
As I develop a mini forum feature in my Next.js app, I encountered an issue when trying to delete a forum post using axios.delete and an HTML form. Despite the successful deletion from the database, an error message stating "405 Method Not Allowed" is disp ...
I am attempting to display data where the "Heading" matches the name of the user who is currently logged in. I am using Next.js to server render the information from my Prisma database. However, when I attempt to filter the data to only show "Segments" whe ...
Current Environment: Utilizing NextJs, React, and VsCode Noticing a problem with syntax highlighting in my VSCODE editor. I have installed the following extensions: ENV DotEnv As per suggestions, I updated my json configuration file as follows: " ...
My Next.js version is 14.1.0 and I am currently using the App router. async function Page() { const dataPromise: Promise<any> = getData(); const data = await dataPromise; console.log('data: ', data); return ( .... ); } The ge ...
Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...
I am encountering an issue with the next-auth implementation. I am trying to set a cookie, but I am having trouble figuring out how to do it. auth.js import { useCookies } from "react-cookie"; import { setCookies } from 'cookies-next'; import { ...
I am currently working on a Next.js project that includes Supabase authentication. I have set the 'Site URL' in my Supabase settings to https://some-production-url.com for the production environment. However, during local development, I need the ...
I have customized my next.config file (webpack) to generate a static JavaScript file (.next/static/loader.js). The original loader.js is an Immediately Invoked Function Expression (IIFE): (function stickerLoader(){ alert('Hello'); // ... so ...
Struggling with properly loading data into state for my todo app has been quite the challenge. In my todo app, I have a next.js page component located in pages/index.tsx. Here, I fetch data from my API using getServerSideProps and pass it to the component ...
I'm interested in using NextAuth with Prisma Adaptor for a MySQL (5.7.36) database, but I encounter the following error: Error: Specified key was too long; max key length is 1000 bytes 0: sql_migration_connector::apply_migration::migration_step ...
Starting from the 13th step, SSR is utilized by default and in order to opt for client side rendering you must specify it at the top like so: 'use client' Currently, my setup involves TypeScript and styled-component integration. Take a look at ...
I am currently facing an issue with my Next.js project where I am unable to use image files from the public folder. Despite checking that the file paths, names, and extensions are correct, as well as ensuring my configurations are accurate, I keep encounte ...
I recently launched a website on AWS Amplify Hosting with the front-end built using Next.js. The backend is powered by AWS App Sync and DynamoDB, utilizing the API Category in Amplify. Interestingly, I have set caching to None in the AppSync API. One of t ...
Currently, I am utilizing the Doughnut feature from the react-chartjs-2 library and I have a specific request. My goal is to change the color of the text beneath the graph to white because it is difficult to read against the current background (please refe ...
As I navigate through a next.js page, I often notice a noticeable delay between triggering a router.push and the subsequent loading of the next page. How can I accurately measure this delay? The process of router push involves actual work before transitio ...