Skip to main content

Hướng dẫn fix lỗi. "localStorage is not defined" trong Next.js

Mục lục:

Lỗi "localStorage is not defined" trong Next.js

Lỗi "ReferenceError: localStorage is not defined" xuất hiện khi bạn sử dụng localStorage trong Next.js 

Tại sao lại xuất hiện lỗi này?

Lỗi này xảy ra do localStorage không được định nghĩa trên window object mà trong khi Next.js lại thực hiện kết xuất ở server trước kết xuất ở client.

Vậy nên bạn không thể truy cập vào cocalStorage cho đến khi trang được kết xuất và hiển thị trên client, hay window object đã được định nghĩa.

Hướng dẫn cách fix lỗi "localStorage is not defined"

Để fix lỗi này, bạn chờ đợi trang đã định nghĩa window objects. Dưới đây là một vài cách

Cách 1: Kiễm tra trước khi sử dụng

if (typeof window !== 'undefined') {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}

Cách 2: Sử dụng useEffect hook

import { useEffect } from "react";

useEffect(() => {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}, [])

useEffect chỉ chạy ở client vì vậy bạn có thể sử dụng localStorage một cách an toàn