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.
I could use some help figuring out where exactly to implement my OnChange and Map functions for mapping JSON data into a Range Slider. Everything seems to be rendering correctly, but I keep encountering an error when I try to move the slider: Unhandled Ru ...
While working on my Next.js project locally, I used npm run dev for development. After testing my website, I noticed that it scored a 40 in Performance. https://i.stack.imgur.com/3jmro.png Despite trying to use Lighthouse in secret mode, the results rem ...
I am currently working with Next.js using TypeScript and Tailwind CSS. My goal is to relocate the styles folder into the src folder. I have already updated the baseUrl in my tsconfig.json file to point to the src directory, but I encountered the following ...
After updating to the latest version of Next.js, I noticed that when deploying (using Firebase) and trying to navigate the page, it completely refreshes, which does not happen locally. const CustomLink = ({ children, page, ...props }) => ( <Link cl ...
Currently, I am attempting to render the AntDesign Menu component recursively. While there are examples available for rendering with standard ul and li tags, when I try to switch to using Menu.Item and SubMenu, all items become active with incorrect styles ...
Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is it simpl ...
I encountered a hydration error when using Next 13 to create a navigation menu that displays the current date and time. Despite being a client component and utilizing useEffect, I'm still facing this issue. ### /src/components/navigation/index.tsx 'use cl ...
When using Next.js, I noticed that my source files are being sent to the browser and are easily accessible through devtools. This poses a security risk as these files contain sensitive getServerSideProps functions with my API keys. I would greatly appreci ...
Recently dipping my toes into the world of next.js. I'm currently working on implementing a login feature in my React web app using next-auth locally. However, whenever I click the login button, it redirects me to "http://localhost:3000/api/auth/error." I ...
I am facing difficulty in getting my mobile menu to function properly. Initially, I attempted to position it above other content using the useEffect hook, but unfortunately, it resulted in breaking the entire project. This is the error message I encountere ...
I'm currently utilizing "next": "13.2.4" and attempting to set up Sentry for Next.js using the wizard: npx @sentry/wizard@latest -i nextjs Unfortunately, I keep encountering this error: TypeError: Cannot read properties of undefined (r ...
I'm currently working on a project with Next.js and Material UI, but I've run into some difficulties integrating Tailwind CSS with MUI. Despite following this helpful guide, I can't seem to get the classes to apply. If anyone has any tips or suggestions, I ...
I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...
Currently, I am tackling a project in nextjs that involves Prisma and GitHub authentication. However, when I run npm run dev, the project fails to compile. The error is visible in this image: https://i.stack.imgur.com/HC8dc.png How can I troubleshoot and ...
My current task involves setting up a Docker environment using the *.localhost format (like front.localhost and sdk.localhost), which browsers recognize as pointing to 127.0.0.1 without requiring manual host modifications. The issue I'm facing is with the ...
I have a simple app built using the Next JS starter kit, and I am attempting to integrate custom functionality as outlined in the documentation: class MyApp extends App { static async getInitialProps({ Component, router, ctx }) { let pageProps = {}; ...
view the error image I am currently in the process of developing an NFT search application that is capable of locating the NFTs associated with a specific wallet address. However, I am faced with the challenge of using Alchemy without exposing the API key ...
I recently set up a new Typescript/React project and encountered the following error in the tsconfig.json file: "Cannot find type definition file for 'bson'. The file is in the program because: Entry point for implicit type library 'bson'" Any suggestion ...
My issue lies in grasping the concept of how server-side rendering single-page application frameworks like Next.js are able to receive pre-rendered full HTML on the front end without having to completely rewrite the entire page. The Next.js website explain ...
How can I implement Redux toolkit in the NextJS 13 App router? I have included all my slices and code related to redux toolkit. I am encountering an error in the terminal, which indicates that there might be an issue with the code. In Nextjs 13, it seems ...
Looking into a react component for a profile button that opens a menu with three options: My Profile, Settings, and Logout. The issue seems to be with the onClick event on the a tags not working as expected (the console.log is not being printed). Interes ...
I'm currently exploring NextJS with SSR and encountering an error when trying to fetch data from a Spotify playlist using the spotify-web-api-js library. This issue only occurs when executing on the server side: error - ReferenceError: XMLHttpRequest is no ...
I've been diving into the world of Next.js 13 app directory and React 18's Server Components. In line with the documentation, I decided to include an async fetch() call within a Server Component while also marking the component as async. However ...
import Link from 'next/link' export const getStaticProps = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await res.json(); return { props: { ninjas: data } } } const ...
Does anyone know how to transfer API data to another page? The API data is being passed to the sendProps function and then forwarded to another page. export async function getStaticProps(context) { const maxPokemons = 251; const api = "https: ...
import dotenv from 'dotenv'; dotenv.config(); export const getGoogleUrl = (from: string) => { const clientId: string = process.env.GOOGLE_CLIENT_ID!; const callback: string = 'http://localhost:3000/api/auth/callback/google'; console.log(clientId) ...
The issue I'm facing involves the rendering of a hook that helps determine if my components are within the screen's view to trigger animations. This hook is executed in _app.tsx, however, it doesn't run when switching to another page. Oddly enough, placing ...
I am completely new to nextjs and I encountered an issue with the Image component. After researching, it seems that there are similar questions out there but none quite match my specific scenario. My problem lies in trying to load an image from a remote s ...
When I use npm run dev to troubleshoot this issue, it utilizes getStaticProps to process various d3 properties before injecting them into the main output function during runtime. However, it seems that getStaticProps is not running as expected - a consol ...
My current project involves updating a Firebase app with NextJS, and I've encountered an issue that needs to be resolved. Upon running the command: % npm run build I received the following message: (node:3719) [DEP0040] DeprecationWarning: The `pun ...
Trying to push an array retrieved from firestore, but encountering issues where the array appears undefined. Here is the code snippet in question: const temp = []; const reference = firestore.collection("users").doc(user?.uid); firestore .collec ...
Struggling to integrate a button component from the Elastic UI library into my code. Every time I try to add the button, I encounter a window is not defined error. The API call and other functionalities work smoothly until I introduce the button component ...
I am currently working on setting up a release pipeline using classic Azure pipelines for my Next.js project deployment on a self-hosted Windows server. I have configured IIS as a redirection server to redirect traffic to the Next.js application. However, ...
I have deployed a Next.js application and decided to include NextAuth in it. Everything works as expected on localhost. However, when I switch to production mode, I receive a client_fetch_error: [next-auth][error][CLIENT_FETCH_ERROR] JSON.parse: unexpect ...
My application is built using next js and I am incorporating framer motion for animations. The introductory animation works fine, but I am unable to get any of the exit animations to function. I have enclosed the code within animated presence, however, it ...
I am looking to integrate both Tailwind and Material Tailwind in a Next.js 14 project. Below is my customized tailwind.config.ts file (already configured with Tailwind CSS): import type { Config } from 'tailwindcss' const config: Config = { content ...
I recently switched my create-react-app to a next.js app in order to implement SSG. I successfully tested the getStaticProps function using a jsonplaceholder API and was able to retrieve data and display it. However, when I changed the API, it started retu ...
Encountering an error: Home.getInitialProps = async ctx => { try { const res = await axios.get('http://localhost:1337/api/restaurants'); const restaurants = res.data; return { restaurants }; } catch (error) { return { error }; } }; ...
Is there a way to access my redux-toolkit store data from within the rtk-query endpoints? How can I retrieve information from my store in the query or transformResponse methods? import { createApi } from '@reduxjs/toolkit/query/react' import customFetchBa ...
When I try to pass data from one component to another using query, I encounter an issue where the data is undefined or { params: {}, searchParams: {} }. However, in the ProductData component, the data is received correctly. Can you help me identify what I ...
Is there a way to hide the yellow title when focusing on an input field? I'm having trouble passing it from the component to use it in the index page. You can view my code at this link. ...
My goal is to create a dark mode toggle that cycles through 3 states { 0:auto, 1:light, 2:dark } in a loop. I also want to save this value in localStorage so it can be fetched on page reload. However, I'm facing an issue where the themeIndex doesn&apo ...
I'm currently working on the user authentication section of a nextjs app. The majority of it is done, except for the protected routes. I'm trying to manage the authentication aspect in _app.js. Below is the code snippet: import App from 'next/app' import ' ...
I am in the process of developing and deploying a React / NextJS application to a Weblogic J2EE server with a specific context. While I have some experience with React, I am relatively new to NextJS. The current steps for building and verifying the app ar ...
I am currently working on developing a multilanguage website using Next JS. For the translation functionality, I have integrated the next-translate package into my project. When it comes to generating posts, I have opted for static generation as my appro ...
In my first Next.js and Heroku app, I set up a payment page for my application. I upgraded my Heroku dyno to automatically have SSL added and pointed a subdomain at my Heroku app. Everything works fine, but when a user manually types in the URL (e.g., exam ...
I've successfully tested this locally, but encountered a "Response Error: Unauthorized" when deploying on Vercel. After creating and verifying a Single Sender Verification on Sendgrid, I attempted to generate a new API key, but the issue persists. I ...
Encountering numerous type errors when executing yarn next build, such as: Type error: Property 'href' does not exist on type '{ name: string; }'. This issue leads to the failure of my build process. Is there a specific command I can include in my tsconf ...
I am currently using Next.js version 13.4.3 in my app directory to create a blog site. However, I am facing an issue. When I run npm run build locally on my computer and then start with npm run start, the new posts are displayed normally after adding them ...
I've been facing an issue ever since Next.Js 13 updated the `pages` folder to a new `app` folder. Whenever I try to rename the default "Pages.tsx" file to something like "Home.tsx" or "Information.tsx", it breaks and shows a 404 Page error. The first time ...
I have been attempting to mock a named imported function in a NextJS page, but so far all my efforts from various sources have been unsuccessful. I tried to replicate this by using create-next-app with --example with-jest and minimal code as shown below: ...
This appears to be a duplicate query as I have extensively searched on Google but could not find any relevant thread. The code is located under pages/amp/amp/ export const config = {amp: true}; const posts = [ { body: "Vivamus viverra augue lib ...
Currently, I am exploring the capabilities of NextJS 14 to see how it could enhance the user experience for our clients. Our existing single-page application (SPA) is quite large and slow to load, with much of it going unused during a typical visit by a cl ...
For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...
I am currently in the process of developing a component library and CSS framework, and I am looking to showcase it within an iframe to separate the style from the main page. My development setup involves using a monorepo with Next.js (for documentation/dem ...
Currently, I am attempting to write unit tests using react-testing-library for my Next.js project. However, I am encountering some difficulties with the next router, especially regarding localization. const t = locale === 'fa' ? fa : en; During ...
I've encountered a challenge while working with Next.js 13 and Heroku - there seems to be limited information on handling SSL with this combination. Although I have implemented a solution derived from this blog post below, Google is not happy with the re ...
I'm currently facing an issue where I am working with Nextjs and NextAuth, and I need to access another backend by setting the Bearer token in the Authorization header. My concern is not exposing the token to the client, so I aim to retrieve it in a s ...
Can anyone help me with identifying links, numbers, and text in WhatsApp and other app input boxes? I also want to be able to preview the page attached to a link and style these elements separately from other text. I am currently working on a project whe ...
I have been working on a Next.js project for some time now. The project includes i18n support, and I'm keen to write unit tests for it. However, I've hit a roadblock in figuring out the most effective way to approach writing these tests. Should I ...
There was an issue in the node_modules/@prisma/client/runtime/library.d.ts file on line 1161, specifically error TS1005 where a '?' was expected. 1161 | select: infer S extends object; | ^ 1162 | } & Record<s ...
Is it possible to obtain the hostname in the _document.js file within nextJS without access to the window object during server-side rendering? I attempted to retrieve it from initialProps (context), yet the req in initialProps remained undefined. Are the ...
After a valid user login following proper registration through REST API, I am looking for the best way to store the JWT token that is generated. I have researched various methods of storing JWT on the client side, including local storage, session storage, ...
Whenever I run the command npx create-next-app, a prompt appears asking me to specify an import alias. This question includes options such as ( * / ** ) that I find confusing. My preference is to use standard ES6 import statements, like this: import Nav f ...
I'm currently in the process of building a website for my friend using next.js. She already has a blog on Wix and now wants to integrate it into her new website. Should I build a new blog from scratch with next.js or attempt to connect her existing Wi ...
I'm currently developing an Admin panel using React-Admin, but I've encountered some difficulties with customizing the table grid and other components. Specifically, I'm looking to adjust the padding of the MuiTableCell element. Here's how it looks at the ...
In my Next JS(v14.0.4) application, I have implemented stripe payment links and included the user's email in the link using the prefilled_email parameter based on the instructions provided in the stripe documentation: Customize checkout with URL parameters ...
I'm currently using next JS in combination with tailwind css and the react-responsive-carousel package. The issue I'm facing is that when I swipe through the images, they transition horizontally without any additional effects such as fade or ease-in-out. ...
I've been assigned the challenge of fixing a troublesome bug in my next.js application. The issue arises when navigating on IOS using touch gestures, causing the page content to flicker. It appears that the browser captures a snapshot of the heap and ...
I am facing an issue when trying to deploy my website to production. I keep getting a 504 status error due to either high memory usage or slow performance. Vercel suggests that the request is taking too long. I am relatively new to using puppeteer and ha ...
When developing a custom Pagination component in React, I encountered an issue where the indexing restarts from "0" every time the page is changed using the next or previous button. What I want is for the index to start from the last position when clicking ...
I need help with making a request based on a variable change using React Query. Currently, I am retrieving a value from a query parameter in the URL and want to re-execute the useQuery function when this value changes or exists. This is how my useQuery f ...
Encountering the error 'Cannot read property 'map' of undefined' while utilizing getStaticProps in Next.js within components/featured-posts.js. However, when I use it directly on the pages/index.js page, it displays the results without ...
Greetings! I have a colleague who has a node.js (next.js) website that runs smoothly when built and started through the console (npm run build and npm start). We have now hosted it on an Azure VM (Windows Server 2016 IIS, with iisnode and urlrewrite inst ...
Currently, as I develop an ecommerce website using Next.js and integrate Stripe for checkout, I've come across the feature of custom fields in Stripe. This feature allows me to add options such as small, medium, and large for clothing sizes. However, a ch ...