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
