修复Next.js中window is not defined方法详解

function updateLastSeen() {
    const lastSeen = window.localStorage.getItem('last-seen') ?? new Date();
    window.localStorage.setItem('last-seen', new Date().toString());
    return lastSeen;
}
function WindowPage() {
    const lastSeen = updateLastSeen();
    return <div>Last Seen: {lastSeen}</div>;
}

function useLastSeen() {
    const [lastSeen, setLastSeen] = useState(null);
    const retrieved = useRef(false); //To get around strict mode running the hook twice
    useEffect(() => {
        if (retrieved.current) return;
        retrieved.current = true;
        setLastSeen(updateLastSeen());
    }, []);
    return lastSeen;
}

function WindowPage() {
    const lastSeen = useLastSeen();
    return (
        <div>
            Last Seen: {lastSeen}
        </div>
    );
}

const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js
function WindowPage() {
    const [lastClick, setLastClick] = useState('');
    if (isBrowser()) { //Only add the event listener client-side
        window.addEventListener('click', (e) =>
            setLastClick(`${e.pageX}, ${e.pageY}`)
        );
    }
    return (
        <div className="m-auto rounded bg-violet-600 p-10 font-bold text-white shadow">
            Click at: {lastClick}
        </div>
    );
}