Skip to content

Tag: next.js

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: