How to use localStorage in Next.js | Updated 2024

110

Next.js is a popular React framework that enables server-side rendering and static site generation. However, handling client-side features like localStorage requires careful consideration due to the differences between server-side and client-side execution. This guide will walk you through how to use localStorage in a Next.js application effectively.

Steps for usage of localStorage in Next.js

Step 1: Setting Up Your Next.js Project

First, create a new Next.js project if you don’t have one already:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

Start the development server:

npm run dev

Step 2: Understanding Server-Side and Client-Side Rendering

Next.js renders pages on the server by default, but localStorage is a browser-specific feature, meaning it is only available on the client-side. Thus, any code accessing localStorage must only run on the client.

Step 3: Using localStorage in a Next.js Component

To safely access localStorage, you need to ensure the code runs only on the client side. This can be done using React hooks like useEffect.

// pages/index.js

import { useState, useEffect } from 'react';

const Home = () => {
  const [name, setName] = useState('');

  useEffect(() => {
    // Check if the window object is available
    if (typeof window !== 'undefined') {
      // Retrieve the name from localStorage
      const storedName = localStorage.getItem('name');
      if (storedName) {
        setName(storedName);
      }
    }
  }, []);

  const handleChange = (e) => {
    setName(e.target.value);
    localStorage.setItem('name', e.target.value);
  };

  return (
    <div>
      <h1>Welcome, {name}</h1>
      <input type="text" value={name} onChange={handleChange} placeholder="Enter your name" />
    </div>
  );
};

export default Home;

Explanation

useEffect

This hook ensures the code inside it runs only after the component has mounted, which is exclusively on the client side.

typeof window !== ‘undefined’

This check ensures that the code accessing localStorage only runs in a browser environment where window is defined.

Step 4: Handling SSR with localStorage

In cases where you need to handle server-side rendering (SSR) with Next.js and still want to access localStorage, you should always ensure your localStorage code is protected by client-side checks.

Advanced Usage: Custom Hook for localStorage

To avoid repetitive code and handle localStorage more elegantly, you can create a custom hook.

// hooks/useLocalStorage.js

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') return initialValue;

    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
};

export default useLocalStorage;

Using the Custom Hook

// pages/index.js

import useLocalStorage from '../hooks/useLocalStorage';

const Home = () => {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <h1>Welcome, {name}</h1>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
    </div>
  );
};

export default Home;

Conclusion

By following these steps, you can effectively manage state with localStorage in your Next.js application. Remember to always check for the client environment when dealing with browser-specific features to avoid errors during server-side rendering. Using custom hooks like useLocalStorage can also help encapsulate and manage localStorage logic more cleanly and efficiently.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

How to use localStorage in Next.js – FAQs