title: Server Error ReferenceError: localStorage is not defined in next js while passing getLocalStorage data in useState array
body: <blockquote>
  <p>I am getting this error in next js while working with localstorage it shows following error &quot;<strong>Server Error ReferenceError: localStorage is not defined</strong>&quot; .when i try to pass the getLocalItem() function created by me, to use in my useState([]) of setItem, in getLocalItem function i tried everything but its not working just for &quot;localStorage inbuit function i.e getItem('')&quot;;</p>
  </blockquote>
  <hr />
  <pre><code>    import { useState, useEffect } from 'react';
      import Image from 'next/image';
      
      //To get the items from local storage
      const getLocalItems = () =&gt; {
          let todoList = JSON.parse(localStorage.getItem('Todos'));
          console.log(todoList);
          if (todoList) {
              return JSON.parse(localStorage.getItem('Todos'));
          } else {
              return [];
          }
      }
      
      const Todo = () =&gt; {
          const [inputData, setInputData] = useState('');
          const [items, setItems] = useState(getLocalItems());
      
      
          const addItem = () =&gt; {
              if (inputData) {
                  setItems([...items, inputData]);
                  setInputData('');
              } else {
                  return alert('No Data to add');
              }
          }
      
          const deleteItem = (id) =&gt; {
              console.log(id);
              const updateditems = items.filter((ele, ind) =&gt; {
                  return ind !== id;
              });
      
              setItems(updateditems);
          }
      
          const removeAll = () =&gt; {
              setItems([]);
          }
      
          //adding data to local storage
          useEffect(() =&gt; {
              localStorage.setItem('Todos', JSON.stringify(items));
          }, [items])
      
      
          return (
              &lt;&gt;
                  &lt;div className=&quot;main-div&quot;&gt;
                      &lt;div className='child-div'&gt;
                          &lt;figure&gt;
                              &lt;Image src='/todo.svg' alt=&quot;Picture of the author&quot; width={150} height={150} /&gt;
                              &lt;figcaption&gt;Add Your List Here &lt;/figcaption&gt;
                          &lt;/figure&gt;
      
                          &lt;div className='addItems'&gt;
                              &lt;input type=&quot;text&quot; placeholder=&quot;Add Item.... &quot; value={inputData} onChange={(e) =&gt; setInputData(e.target.value)} /&gt;
                              &lt;i className=&quot;fa fa-plus add-btn&quot; title=&quot;Add Item&quot; onClick={addItem}&gt;&lt;/i&gt;
                          &lt;/div&gt;
      
                          &lt;div className='showItems'&gt;
                              {items.map((ele, ind) =&gt;
                                  &lt;div className='eachItem' key={ind}&gt;
                                      &lt;h3&gt;{ele}&lt;/h3&gt;
                                      &lt;i className=&quot;fas fa-trash-alt add-btn&quot; title=&quot;Delete Item&quot; onClick={() =&gt; deleteItem(ind)}&gt;&lt;/i&gt;
                                  &lt;/div&gt;
                              )}
                          &lt;/div&gt;
      
                          &lt;div className='showItems'&gt;
                              &lt;button className='btn effect04' data-sm-link-text='Remove All' onClick={removeAll}&gt;&lt;span&gt;CHECK LIST&lt;/span&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          )
      }
      
      export default Todo;
  </code></pre>