The issue is that Next.js pre-renders pages by default, which means they are rendered on the server first and then sent to the client to be hydrated.

The error comes when you're setting the default value of the state based on this condition: typeof window !== 'undefined'.

Consider the following example:

const Page = () => {

  const [name, setName] = useState(typeof window !== 'undefined' ? 'Peter' : 'Rick')

  

  return <h1>{name}</h1>

}



export default Page

This code will throw an error of the type Error: Text content does not match server-rendered HTML.

If you inspect the page's source, you will see that the name rendered on the server was "Rick" while on the client-side's first render the name rendered was "Peter". There must be a match between the server-side rendered content and the client-side first render's content.

What you can do is move the localStorage data gathering and parsing logic to another useEffect instead and set the state in there. This solves the issue because useEffect only runs on the client-side, therefore you will effectively match both server-side and client-side first render content.

export default function Page({ data1 }) {

  const [bookmark, setBookmark] = useState([])



  const addToBookmark = (ayatLs) => {

    setBookmark([...bookmark, ayatLs])

  }



  useEffect(() => {

    if (bookmark.length === 0) return

    localStorage.setItem('bookmark', JSON.stringify(bookmark))

  }, [bookmark])



  useEffect(() => {

    const bookmarkFromLocalStorage = localStorage.getItem('bookmark')



    const parsedBookmark =

      bookmarkFromLocalStorage !== null

      ? JSON.parse(bookmarkFromLocalStorage)

      : []



    setBookmark(parsedBookmark)

  }, [])



  return (

    <>

      <div className='modal-body'>

        <ul>

          {bookmark.map((x) => (

            <li key={x.nomor}>{x.tr}</li>

          ))}

        </ul>

      </div>

    </>

  )

}