Storing and Retrieving Data in Next.js Using LocalStorage and TypeScript

Persisting data in Next.js using localStorage is very frustrating, and I have read many posts where other developers use other libraries or cookies to accomplish the same effect as localStorage. For my particular use case, I found it necessary to utilize localStorage to store user preferences instead of implementing a modal and making API requests for every website visit. By using localStorage, I was able to avoid these additional steps and streamline the process. So, to use and persist data in Next.js, we are not doing it the normal way. Let’s get started! npx create-next-app@latest next_localstorage To install TypeScript, once you run the above command in your terminal, you have options to choose, TypeScript, and EsLint. Then, install , tailwindCSS here So what are we creating? We'll create a color selector with a dropdown menu so that users can select the color they want, and store whatever option we select in our localStorage in a way that after the page refreshes the data still persist. /pages/index.ts import React from 'react';

const Home = () => { const [selected, setSelected] = React.useState('red'); const [selectedState, setSelectedState] = React.useState(false);

return ( setSelectedState((prev) => !prev)} className='relative px-4 py-4 rounded-md text-black font-semibold bg-gray-400' > Select Your Code {selectedState && ( setSelected('red')} className='w-full py-2'> Red setSelected('blue')} className='w-full py-2'> Blue setSelected('yellow')} className='w-full py-2'> Yellow setSelected('gray')} className='w-full py-2'> Gray setSelected('green')} className='w-full py-2'> Green )}

This is the color you picked: {selected}

); };

export default Home; So, with the what this state does is change the default value for ` ` to any color of the user's choosing. Then we use the value to change the background color of the box we created. And of course, we used Tailwind for the styling. const [selected, setSelected] =React.useState('red') red selected Learn more about this CSS framework . here Let’s get into using localStorage with Next.js Typically, when using a hook to track a value, the value will reset to its original state after a page refresh. To avoid this issue, a specific logic must be created to utilize localStorage without encountering errors. So here is the modification to the const [selected, setSelected] =React.useState('red') But first, let's set localStorage in hook. useEffect() React.useEffect(()=>{ window.localStorage.setItem('user_selected_colour', selected) },[selected]) Then for the selected State. const [selected, setSelected] = React.useState(():string =>{ if (typeof window !== 'undefined'){ const from_localStorage = window.localStorage.getItem('user_selected_colour') if (from_localStorage === null || from_localStorage === undefined){ return 'Red' }

return `${from_localStorage}` ? from_localStorage : 'Red' } return '' }); Now with this, we can now persist our data, and not have to rely on any third parties apart from our browser localStorage. Let me explain this further: First, we want to make sure that window is defined, and if it is, then we get the item from our localStorage and then store it in . If the user opens the web app for the first time, nothing is saved to localStorage, so by default, we get or . In the next line of code, we check to see if the returns or which will be a one-time event(when the user opens the web for the first time), then we set it to the default value that we want, and in this case, it is . from_localStorage undefined null from_localStorage null undefined red Once we do that is not or , so if the user should choose another option like , then is defined and we move to the next line which is: . Summarily, all we are saying is that, if a value exists, then return that value or else return our default value. from_localStorage null undefined blue from_localStorage return `${from_localStorage}` ? from_localStorag : 'red' red But, we face a problem with hydration. Note that the localStorage is working perfectly fine after you close the hydration error. The reason we get this error is that HTML that is rendered on the , doesn’t match the value that was rendered on the client side. Suppose a user selects a different color, such as blue, but the server still has the value red. This discrepancy between the server and the client can cause a hydration error. To avoid this issue, we can use a hook to store every option that the user selects. This new state will reflect the value selected by the user and can be displayed on the client side. server side useState You should understand it more, after reading the code. const [local] = React.useState(():string =>{ if (typeof window !== 'undefined'){ const from_localStorage = window.localStorage.getItem('user_selected_colour') if (from_localStorage === null || from_localStorage === undefined){ return 'red' }

return `${from_localStorage}` ? from_localStorage : 'red' } return '' }); const [selected, setSelected] = React.useState (local); const [selectedOption, setSelectedOption] = React.useState (); const [selectedState, setSelectedState] = React.useState(false);

React.useEffect(()=>{ window.localStorage.setItem('user_selected_colour', `${selected}`)

setSelectedOption(`${selected}`); },[local, selected]) So, we use this to select the state and use this to display the state, so that way we don’t get any errors. And this can also work on objects also. const [selected, setSelected] = React.useState (local); const [selectedOption, setSelectedOption] = React.useState (); So this is what the whole code would look like: import React from 'react';

const Home = () => { const [local] = React.useState(():string =>{ if (typeof window !== 'undefined'){ const from_localStorage = window.localStorage.getItem('user_selected_colour') if (from_localStorage === null || from_localStorage === undefined){ return 'red' }

return `${from_localStorage}` ? from_localStorage : 'red' } return '' }); const [selected, setSelected] = React.useState (local); const [selectedOption, setSelectedOption] = React.useState (); const [selectedState, setSelectedState] = React.useState(false);

React.useEffect(()=>{ window.localStorage.setItem('user_selected_colour', `${selected}`)

setSelectedOption(`${selected}`); },[local, selected])

return ( setSelectedState((prev) => !prev)} className='relative px-4 py-4 rounded-md text-black font-semibold bg-gray-400' > Select Your Code {selectedState && ( setSelected('red')} className='w-full py-2'> Red setSelected('blue')} className='w-full py-2'> Blue setSelected('yellow')} className='w-full py-2'> Yellow setSelected('gray')} className='w-full py-2'> Gray setSelected('green')} className='w-full py-2'> Green )}

This is the color you picked: {selectedOption}

); };

export default Home; Now I hope you now know how to persist data in Next.js. For the source code for this project and here is a see live demo Also published here.