I am trying to create a really basic header mini cart with cart item counter in NextJS. Im using the form state value in the header component and then using that value in the child components of the header where the numerical value is rendered. Currently I have the total item count show correctly when I submit my form and
Tag: next.js
Why my images converted to string when submitting post request?
see the screenshot . Why images getting corrupted? I am trying to upload images using axois post but axois post can’t processing my images correctly . My code divided in two part. First part where I writing logic for upload multi image and second part I am using it in my page component. first part this code for upload multi
I can’t import emotion js style with dynamic variable
I have a webpage that looks like this: This is my _app.tsx file: And this is shared/styles.js: Notice that blueOnBlack is an attempt to put the Futuristic Sci-Fi UI Web Framework style into its own importable variable. The problem is that when I put blueOnBlack into the _app.tsx as the style for the Futuristic Sci-Fi UI Web Framework div tag,
Persist the login state in Next js using localstorage
I’m writing an authentication application in Next Js (v12.2.5). The application also uses React (v18.2.0). The problem is with persisting the authentication state. When the browser is refreshed, the login session is killed. Why is this happening even though I am getting and setting the token in the local storage. I would like to persist the login session to survive
How to set a redux toolkit initial state to an array of object or localstorage with typescript?
i’m currently trying to set an initialState (items) to an array of object or the same thing from the localStorage. The problem is, that i’m receiving this kind of error. Type ‘number’ is not assignable to type ‘{ id: string; price: number; quantity: number; totalPrice: number; name: string; }[]’.ts(2322) cart.ts(4, 3): The expected type comes from property ‘items’ which is
middleware.js in nextjs doesn’t work at all
(Next v.12.2.3) No matter what I code, pages/middleware.js seems not running at all! I wanna redirect uppercase urls to lowercase urls. what should I do? Answer The documentation says: Create a middleware.ts (or .js) file at the same level as your pages directory So it shouldn’t be inside pages/, but in the same directory as pages/.
Pass array value to getStaticProps in Next js
I’m doing fetch request to get my Youtube playlist. and in doing so i used getStaticProps(), the problem I’m facing is that my playlist depends on my array of objects result. the array of objects structure is in my ./utils/playlists.js file. what i want to achieve is that instead of getting my const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID; from my .env.local file
Two-second timeout not being respected by function on NextJS site
I have an ‘image slide show’ implementation which cycles among images every two seconds. It does so by changing their display types from “none” to “block”. At the top of my .js file, the showSlides function is defined: From here, I create four items, and call the showSlides function from within the HTML of the Home() function, which is located
Clicking on next/link causing an issue in getInitialProps
I’m trying to add a link to redirect users to the create page, But when I clicked on the link I got the following error: Link code : getInitialProps // _app.tsx Answer You have to write isomorphic code inside MyApp.getInitialProps because that code can run both on the server (during first page load) or on the client (during client-side navigations).
Updating the localStorage is not in sync
When I toggle darkmode it doesn’t update in _app unless I have 2 tabs opened and trigger it in one tab, then the other tab gets updated and darkmode is toggled, but not the tab I pressed the toggle. I use useSettings in both index and _app. I recorded a video so it’s easier to see what’s going on: https://youtu.be/W5du7Y-457Y.