I want to get a doc from firebase on page render, which I do get first(following a button), but after I refresh the page I get this error: My code is: when it works fine I go to the page clicking this div: but now if I refresh, i get the above error. Rest of the code here: fbconfig.js: I
Tag: next.js
Apollo Client RetryLink has no headers in response
I’ve implemented a RetryLink into my Apollo Client as follows: The goal is to use a custom header sent by the server to adjust the delay (the server is rate limited). However, the headers field in the response is always empty. The response itself is present and looks as follows: If I use another link th…
How to conditionally render label to avoid labels overlapping in recharts?
I’m having an issue similar to this using Recharts library with NextJS. I’m using a ComposedChart that renders Bar and Line components. However, the Labels are overlapping on each other if the value is not big enough between them. Is there any way we can conditionally render out the Label inside L…
Apollo Client useQuery making un-necessary refetches upon Next.js router.push
I’m dealing with an issue in which a query inside a useQuery Apollo Client hook is getting un-necessarily re-run whenever Next.js’s router.push (docs here) is called. The abbreviated code is: You can see a reproduction on CodeSandbox here. My expectation is that whenever the button is clicked (and…
Tailwind animation plays twice when changing pages in Next.js?
I’m using react-hot-toast to show alerts & animate it while changing pages. The animation plays fades in twice when page changes. I’m using tailwindcss-animate in my tailwind.config.js to add animation classes. I’m only using 4 animation classes: animate-in, animate-out, fade-in, & f…
How to prefetch code for multiple pages from one page request in Next.js?
Using client-side navigation I can navigate between pages using only JavaScript. The first request of a page takes some time to render and then the navigation back to it is nearly instant. During that first render that page only loads what’s necessary for it. That isolates each page making them independent. I…
replacing createStore with configureStore
I updated my packages and VScode told me that createStore was depreciated. So I went about replacing it My store file, I have included the original line as a comment at the bottom Using redux App component With configureStore() the console is giving me a warning about putting non-serizible objects in state. T…
Ensuring sensitive code is run only server-side with NextJS, where can such code be ran from?
I’m learning NextJS and I’m trying to determine how to layout my project with a clean architecture that’s also secure. However, I’m not sure about where to store code that contains potentially sensitive data (ie. connections to databases, accessing the file system, etc.). I’ve re…
Updating Next.js App Components After User Login
I have a static 2-page Next.js app that I want to integrate a user-based system with. I’ve decided to use Auth0 for authentication. My goal is to let a user see documents that they have saved on my app, similar to Grammarly, but I am not sure how the entire UI will conditionally change after the user ha…
Next-auth CredentialProvider config and redirect
I’m a bit confused on the implementation of the credentials provider and the redirects. The documentation says that the credentials provider doesn’t support a callback and its for the OAuth providers. This is fine. However, instead of staying on the page and flashing an error message or even loggi…