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.
Seeking guidance on leveraging NextJS cache revalidation for a specific use case that seems unique. Currently, I am in the process of developing an online food ordering platform where numerous restaurants (currently 30) can publish their menus for customer ...
I am encountering an issue in my Next.js app when trying to serve a static file. Each time I attempt to use import fs from 'fs';, an error is thrown. It seems strange that I have to yarn add fs in order to use it, as I thought it was not necessary. Why is ...
I have been working on the following starter project: https://github.com/vercel/nextjs-subscription-payments The default content provided in the above link serves as the home page for my project. Now, I am looking to create an admin and dashboard section ...
Previously, my old nextjs website included a meta tag with "name" and "content" attributes in the _document file within the head section, such as: <Html> <head> <meta name='facebook-domain-verification' content:'00000000000000' /> *m ...
In my React project, I have a button that toggles a boolean state. However, I realized that the button can both set and unset the state due to its toggle functionality. I only want the state to be changed once. Is there a different function I can use ins ...
In my current project developed with Next.js, I am utilizing the react-places-autocomplete package to enhance user experience. One specific requirement I have is to filter out location suggestions for India only, excluding all other countries. Despite att ...
I am in the process of developing a unique Markdown- / MDX-based platform for blogging (take a look at my project on GitHub). I want to give users the ability to incorporate their own React components into the content section of their MDX files. The Chall ...
const { Component, pageProps}: { Component: NextApplicationPage; pageProps: any } = props After implementing the code above with 'Component' type set to NextApplicationPage, an error message pops up stating, The name 'NextApplicationPage' could not be fou ...
I've been working on a project where I interact with a MongoDB database from my NextJS site to display data. The goal is to implement CRUD functionality, allowing users to add new content and delete existing one directly from the site. However, there's an ...
I'm embarking on my journey with Nextjs and I've hit a roadblock when it comes to setting up the authentication aspect. I know that Nextjs commonly uses NextAuth for handling authentication. My initial instinct was to integrate providers like Google, but I ...
While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...
I am currently working on establishing a connection to my online redis database. const redis = require('redis'); const client = redis.createClient({ password: '<password>', socket: { host: <host> port: <port> } }); cli ...
I attempted to retrieve data from an API, but unfortunately encountered the following error: Server Error Error: Issue with serializing .results returned from getServerSideProps in "/". Reason: JSON serialization does not support undefin ...
Looking to kick off my NextJS project directly from the build folder (.next). I've already run the next build command and have the .next folder ready. However, despite numerous attempts and different methods, I haven't been able to successfully s ...
I am attempting to use the spotify-web-api-node library to play a track on my application const playSong = async () => { // Verify access token with console.log(spotifyApi.getAccessToken()) setCurrentTrackId(track.track.id); setIsPlay ...
Is it possible to incorporate language detection in Next.js using the default functionality, or will I need to rely on a third-party package? I wasn't able to locate any information about this in the documentation. I would like the initial language to be ...
As a newcomer to the world of BC, I find the documentation a bit confusing. I am interested in utilizing BC APIs with Nextjs and Nestjs. The goal is to develop a traditional web application where Nestjs on the server communicates directly with BC APIs, w ...
I am a beginner in Next.js and I am currently experimenting with the new app router feature by placing my pages under app/.../page.tsx The code snippet provided works when using the page router (pages/blah.tsx) but encounters issues when used in app/blah/ ...
I am working on creating a page that dynamically renders data from localStorage in real-time. My goal is to have the UI update instantly when I delete data from localStorage. Currently, my code does not reflect changes in real-time; I have to manually rel ...
I'm attempting to load a gltf file in Next.js React using the npm package 'react-3d-viewer'. The gltf file is fetched from a database. import {GLTFModel,AmbientLight,DirectionLight} from 'react-3d-viewer' import React, { Suspense } from "react"; import ...
Essentially, I have an API request within the useEffect() hook to fetch all "notebooks" before the page renders, allowing me to display them. useEffect(() => { getIdToken().then((idToken) => { const data = getAllNotebooks(idToken); ...
I'm encountering the issues documented here and here on GitHub. I'm working on incorporating documentation for my Next.js code, and below is my jsdoc configuration file. { "tags": { "allowUnknownTags": true, "di ...
I utilized Google as an authentication provider with NextAuth. I set up all necessary environment variables for both production and development environments. While it functions flawlessly in development mode on my local machine, I encounter the error "Serv ...
Using the Context API in my Next.js project has been giving me trouble lately. Every time I try to retrieve a value from the state using the Context API, I keep getting an error stating that it is "undefined." Here is my AppReducer.js file: const initi ...
I'm determined to boost my website's performance, and the Google Chrome Lighthouse tool is advising me to utilize loadable-components for server-side rendering to "eliminate unused JavaScript". After reading through the documentation, it appears ...
I am currently encountering an issue while using the fs module in a Next.js/React application context. I am developing an app for renting apartments. I have a JSON file named database.json which contains some data, and I am able to retrieve and use it with ...
Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...
I am working on a React app that has a checkbox to disable a datepicker. However, when I use the checkbox to disable it, I am unable to select any date. If I remove the checkbox and its function, there is no error. Currently, the error message I am getting ...
I am in the process of developing a video chat application and I have encountered an issue while working on it (no problems when running npm run dev). Please excuse the messy code for now, I promise to clean it up once I resolve this problem: Here is the ...
Can React components be imported from within the same directory in a page? I am able to successfully import from outside the /pages/[...]/ directory. Importing from /components/[...]/ works without any issues, which is great for reusable components. Howev ...
Can anyone clarify the distinction for me? I'm under the impression that a layout and template are interchangeable terms. ...
I have a project using Next.js + Electron + Typescript. I used the npx create-next-app --example with-electron-typescript command to generate the initial code. When I run npm run dev (which actually runs npm run build-electron && electron . ), the ...
https://i.stack.imgur.com/iATJi.pngGreetings! I am currently working on a Next.js app using Axios and TanstackQuery. My goal is to redirect to the "/login" page when a 401 error is caught by the AxiosInterceptorInstance. The React version is 18, react-dom ...
I am currently exploring the possibility of running Next.js (v13.0.6) with OG image generation logic using @vercel/og in AWS Lambda. Everything runs smoothly locally, both in development and production modes. However, I encounter a 500 error when attempti ...
While working on my project using nextjs with typescript and react-jss, I encountered an error message that reads: Warning: Prop `className` did not match. Server: "mobileNavToggle-0-2-10" Client: "mobileNavToggle-0-2-2" It appears that the issue is rela ...
Struggling with Nextjs has been a challenge for me. Even the most basic tasks seem to elude me. One specific issue I encountered is with an API call that should return 'Logged in' if 'Me' is entered, and display a message from mydata.tx ...
When attempting to fetch data from my internal API using an internal path, I encountered the following error: TypeError: Failed to parse URL from /api/hello** ------------ export async function getStaticProps() { const data = await fetch("/api/hello ...
I am currently working on a Next.js project that utilizes Apollo GraphQL to fetch data from the backend. My goal is to render the page using server-side rendering, but I am facing an issue with calling the backend within the getServerSideProps due to the ...
I am experiencing an issue with two apps registered in the same Azure AD B2C tenant. App1 is a Next.js app utilizing Azure AD B2C authentication using msal-react App2 is a WikiJS app equipped with two authentication strategies (customers and employees). ...
I have successfully installed Dokku and am ready to deploy my basic NextJs application on it. However, I am facing an issue where the application is running in development mode instead of production mode. When I check the value of the NODE_ENV variable in ...
I recently put together a basic nextjs app using typescript. Here's the link to the example: https://github.com/zeit/next.js/tree/master/examples/with-typescript However, I encountered an issue where I am unable to add the className attribute to any ...
Recently, I've started working with next 13 and have successfully created pages for my app such as about, contact, and dashboard. In the dashboard section, I require authentication (auth). Users with a token can access the dashboard while others will be re ...
Is there anyone who has successfully integrated Google Analytics with NextJS 13? I tried following the steps outlined in this thread: How to implement Google Analytics with NextJS 13?, but despite doing everything as instructed, I am not seeing any data o ...
While developing a basic calculator application with Next.js, I encountered an issue. The functionality works correctly when the user interacts with the HTML buttons, but when trying to input numbers using the keyboard, the state resets to 0 before display ...
I am attempting to generate cards dynamically with content fetched from an API. Unfortunately, I have been unsuccessful in finding a method that works during website rendering. My goal is to pass the "packages" as properties to the component within the div ...
I am encountering an issue while trying to render a dropzone component using Next.js and Mantine. For reference, I am following the documentation at . Here is the import statement: import dropzone I am receiving an error message that says: I have inclu ...
I am working with a file instance that I obtained from the formidable library. Here's how it looks: photo: File { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, size: 16648, path: 'public/upload_1.j ...
I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' const withMD ...
SOLVED / SEE MY OWN ANSWER FOR DETAILS Encountering a perplexing error that has left me stuck. I am currently facing an issue where I am trying to send an audio recording captured by the user in my Next.js Frontend to my Next.js API, which appears to be f ...
Incorporating NextJs for Server Side Rendering has been a game-changer for me. I've also implemented a navbar in my application that needs to adjust styles based on the scroll position. Is there a way to determine if the window has scrolled beyond 100px ...
When I directly access the pages of my next.js website, they appear as strings of code without any errors in the Console (Chrome or Safari, with no cache). The functionality may or may not work normally when navigating from the homepage. This is a Next.js ...
Recently, I began working on a Next.js application and successfully configured eslint to ensure code quality. Here is the list of dev dependencies for my Next.js app: "devDependencies": { "babel-eslint": "^10.1.0", &qu ...
Exploring the Contrasting Approaches of Implementing "apollo-client in next.js" in next-with-apollo npm library versus the method outlined in the next.js documentation. For the approach chosen by next.js for Apollo client integration, visit: https://githu ...
Below is the code block that I have: const onRouteChangeStart = React.useCallback(() => { if (formState.isDirty) { if (window.confirm('Confirmation message')) { return true; } NProgress.done(); throw "A ...
Just a few days into my journey with next.js, and I'm already facing a challenge in figuring out how to fetch data from an API. In regular React, I would typically use useState and useEffect for managing state and fetching data. But when it comes to next.j ...
In my experience with Next.js, I've encountered a frustrating limitation on cache size for fetch requests. The 2MB limit means that some of my fetches exceed this threshold and end up not being cached. This becomes particularly bothersome because every tim ...
My current challenge involves an unordered list element with the following structure: <ul className={styles["projects-pd-subdetails-list"]}> {detail.subdetails.map((sub) => ( <li className={styles[ ...
With a staggering number of users visiting the site every day, we are making strides to enhance our visibility on Google by implementing SSR (which may sound unbelievable) and achieving a richer preview when content is shared on messaging platforms. As th ...
I've been diving into next.js and I'm trying to figure out how to set a cookie using the code below. However, I'm encountering an error: "Unhandled Runtime Error. Error: Cookies can only be modified in a Server Action or Route Handler." I was under the i ...
SOLUTION STRATEGY: If you encounter a similar issue and are looking for a more comprehensive solution rather than quick fixes, consider recreating the repository. While it involves more effort initially, it can prevent future issues. In my case, the repos ...
After spending some time experimenting with NextJS, I decided to take on the challenge of converting an application into prerender static pages using getStaticProps and getStaticPaths with [id].js files for each page organized in their individual folders ( ...
Currently, I am working on a NextJS project that uses Sass with TypeScript. Everything is running smoothly in the development environment, but as soon as I attempt to create a build version of the project, I encounter this error. https://i.stack.imgur.com ...
I am currently working on Reactjs (nextjs) and I have successfully integrated the "Nextjs" framework. The pagination is working fine, but the buttons are displaying as "1,2,3,20" instead of "1,2...20" (showing all numbers without using "..."). How can I mo ...
I have currently developed a create react app and I am interested in creating a next.js backend for it. I have set up an API route on the server-side which will fetch data from another API and generate a response accordingly. I do not want to fully migrate ...
https://i.stack.imgur.com/SPvy9.png Looking at the code snippet, it seems that I have employed useQuery() but need it to fetch data only once. Unsure whether this issue lies with NextJS or react-query. ...
After executing npx create-next-app@latest followed by npm run dev, I encountered the error message Command failed with exit code 1.. Additionally, when trying to access https://localhost:3000, an error stating ERR_CONNECTION_REFUSED was displayed. Further ...
We are currently involved in a project utilizing Next.js and Three.js (react-three-fiber). However, after clearing the cache in the browser, the 3D model disappeared and we encountered some errors. Specifically, there was one warning and one error that kep ...
I'm facing an issue while trying to deploy a next.js application on a CentOS server. When I attempt to build it using npm run build, the following error is generated: Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db ...
I am facing an issue with my code as I attempt to utilize https://github.com/lfades/next-with-apollo, next-with-apolo. Despite following the setup, server-side rendering (SSR) is not working for me and it seems like the client call is still being made. If ...
In my new nextjs 13 project, I'm attempting to perform a fetch operation (unsure if it's related to JavaScript or nextjs) and using console.logs to monitor the code execution. let url = `${BASE}/${module}/${path}`; url += "?" + new URLSearc ...
After successfully developing a basic Next.js app with authentication using Next-Auth, I encountered a peculiar issue upon deployment to my production server. Despite configuring the environment variables accordingly in the .env.local file, I faced a persi ...
In the official NextAuth documentation, it is recommended to wrap the component with the Provider as shown below: import { Provider } from "next-auth/client" export default function App({ Component, pageProps }) { return ( <Provider ...
When using the react-final-form component, you can expect the following result: <Field name="answers[0].name" component="input" type="radio" value="0" /> { answers: [ { name: 'value' } ] ...
I want to conduct Jest and Enzyme tests on the Next.js getServerSideProps function. This function is structured as follows: export const getServerSideProps: GetServerSideProps = async (context) => { const id = context?.params?.id; const businessName ...
In my Next.js TypeScript project, I came across a file named next-env.d.ts. This got me thinking about how I can declare enums that would be accessible across all my Next.js files. Can you guide me on how to achieve this and use the enums throughout my p ...