Как исправить ошибку "localstorage is not defined" в Next.js

Почему возникает ошибка?

Next.js рендерит ваше приложение как на сервере, так и на клиенте. localStorage — это веб-API, доступное только в окружении браузера. Поэтому при попытке доступа к localStorage на сервере (где это API не существует), вы получите ошибку "localStorage is not defined".

Что такое localStorage?

LocalStorage (локальное хранилище) - это хранилище данных, которое позволяет веб-приложениям сохранять данные в браузере пользователя. Оно предоставляет возможность сохранять пары "ключ-значение" в браузере и позволяет веб-страницам получать доступ к этим данным даже после перезагрузки страницы или закрытия и открытия браузера.

LocalStorage удобно использовать для хранения пользовательских настроек, состояния приложения и другой информации, которая должна быть доступна между сессиями.

Для справки

Как избежать ошибки

Чтобы избежать этой ошибки, нужно убедиться, что доступ к localStorage осуществляется только на стороне клиента. Вот несколько способов, как это сделать:

1. Проверка наличия window

Используйте условие для проверки, выполняется ли код в браузере:

if (typeof window !== "undefined") {
  // Код, использующий localStorage
  const value = localStorage.getItem("key")
}

Этот код сначала проверит наличие объекта window, который существует только в браузерной среде. Если он есть, тогда можно безопасно использовать localStorage.

2. Использование useEffect в компонентах React

React хук useEffect выполняется только на клиенте, поэтому вы можете безопасно использовать localStorage внутри него:

import { useEffect, useState } from 'react'

export default function MyComponent() {
  const [value, setValue] = useState(null)

  useEffect(() => {
    const storedValue = localStorage.getItem('key')
    setValue(storedValue)
  }, [])

  return (
    <div>
      {value ? `Сохранненное в localStorage значение: ${value}` : 'Значение не сохранено'}
    </div>
  )
}

Здесь useEffect гарантирует, что код внутри него выполнится только после того, как компонент будет отрендерен на клиенте, что позволяет безопасно использовать localStorage.

3. Динамический импорт

Next.js поддерживает динамический импорт, который также можно использовать для того, чтобы гарантировать выполнения кода только на клиенте:

import dynamic from 'next/dynamic'

const MyComponent = dynamic(() => import('../components/MyComponent'), { ssr: false })

export default function HomePage() {
  return <MyComponent />
}

Используя { ssr: false }, вы отключаете серверный рендеринг для этого компонента, гарантируя, что он будет загружен только на клиенте.

LocalStorage vs Cookie

Оба хранилища и localStorage и cookies используются для хранения данных на стороне клиента в веб-приложении, но у них есть различные области применения, ограничения по объему хранения и другие характеристики. Ниже приведу сравнение двух методов:

localStorage

• Лимит хранения: Обычно около 5-10 МБ на домен.
• Доступность: Доступно только в рамках одного происхождения (домен и протокол).
• Срок действия: Данные, сохраненные в localStorage, не имеют срока действия. Они сохраняются даже после закрытия и повторного открытия браузера.
• Передача данных с запросами: Данные не отправляются с каждым HTTP-запросом. Они остаются на стороне клиента, если явно не запрашиваются.
• Использование: Идеально подходит для хранения большого количества данных, которые должны сохраняться между сессиями, например, пользовательские настройки, состояние приложения и другие данные, которые не нужно часто отправлять на сервер.
• API: localStorage.setItem(key, value), localStorage.getItem(key), localStorage.removeItem(key), localStorage.clear().

Cookies

• Лимит хранения: Обычно около 4 КБ на cookie.
• Доступность: Могут быть настроены для доступа из одного происхождения или между поддоменами.
• Срок действия: Cookies могут быть настроены с истечением в определенную дату и время. Если срок действия не установлен, они истекают при завершении сессии (закрытие браузера).
• Передача данных с запросами: Данные отправляются на сервер с каждым HTTP-запросом к домену, который установил cookie, что может влиять на производительность и безопасность.
• Использование: Лучше всего подходят для хранения небольшого количества данных, которые нужно отправлять на сервер с каждым запросом, таких как идентификаторы сессий, токены аутентификации и данные отслеживания пользователей.
• API: Можно установить через document.cookie в JavaScript или через HTTP-заголовки.

Для справки

Заключение

Ошибка "localStorage is not defined" в Next.js возникает из-за попытки доступа к localStorage на сервере. Используя описанные выше методы, вы можете сделать так, чтобы доступ к localStorage происходил только на клиенте, что позволит вам избежать этой ошибки. Надеюсь, этот совет поможет вам в разработке вашего Next.js приложения.