How can I use local storage in a Next.js application?

How can I use local storage in a Next.js application?

You can use the localStorage API in Next.js, but remember it's only available in the browser. You can access it in useEffect or event handlers.

Can you show me a code example?

Sure! Here's a simple example:

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    localStorage.setItem('myKey', 'myValue');
    const value = localStorage.getItem('myKey');
    console.log(value);
  }, []);

  return <div>Check the console for the stored value!</div>;
};

What if I want to retrieve the value when the component mounts?

You can retrieve the value inside the useEffect hook, just like in the example. Make sure to check if localStorage is available.

Are there any limitations I should be aware of?

Yes, local storage has a size limit (usually around 5MB) and is synchronous, which can block the main thread if used excessively.