快捷導(dǎo)航

修復(fù)Next.js中window?is?not?defined方法詳解

更新時間：2022年12月13日 09:28:45 作者：Jovie

這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

這個問題與Next.js的服務(wù)器端渲染有關(guān)。Next.js默認(rèn)會嘗試為您的網(wǎng)站使用SSR。這意味著，由于我們是在服務(wù)器上而不是在瀏覽器中，所以 "窗口 "對象并不存在。解決這個問題的方法是強(qiáng)迫Next.js在瀏覽器中運(yùn)行你的代碼，我將解釋如何做到這一點(diǎn)。

使用useEffect鉤子

該useEffect鉤子總是在瀏覽器中運(yùn)行，所以我們可以用它來確保我們的代碼只能從那里運(yùn)行。關(guān)于鉤子的快速入門知識，請查看這篇文章。

下面是一個簡單應(yīng)用的示例代碼，它將用戶最后一次訪問網(wǎng)站的時間存儲在本地存儲中。如果你不熟悉在React或Next.js中使用localStorage，可以看看我們這里的這個教程，它使用了類似的方法。這個方法是相同的，但有一個小的區(qū)別，那就是你可以在vanilla React組件的主體中使用localStorage，因?yàn)槟J(rèn)沒有SSR：

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>;
}

運(yùn)行這個，我們得到這個你可能熟悉的錯誤：

為了解決這個問題，讓我們引入一個自定義的鉤子，它涉及一個 useEffect。

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;
}

我已經(jīng)把我們的邏輯移到了一個自定義的鉤子上，只是為了保持代碼的簡潔?，F(xiàn)在隨著我們代碼的改變，代碼將只在鉤子運(yùn)行時運(yùn)行，也就是在客戶端。

然后我們可以將我們的組件更新為。

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

這段代碼更簡潔，而且由于 useEffect里面的鉤子只在客戶端運(yùn)行，我們的錯誤就消失了

檢查窗口是否被定義

另一種方法是在我們運(yùn)行代碼之前簡單地檢查窗口對象是否被定義。如果代碼在服務(wù)器上運(yùn)行，由于我們不在瀏覽器中，窗口對象就不存在。

我們不能使用與之前相同的例子，因?yàn)檫@種方法有一個關(guān)鍵的區(qū)別。因?yàn)槲覀儧]有等待組件的渲染，任何對頁面HTML的差異都會導(dǎo)致服務(wù)器端渲染的頁面版本與客戶端不同，我們會在Next.js中得到一個錯誤。

在這個例子中，我們將為窗口對象添加一個事件監(jiān)聽器，以跟蹤頁面上的點(diǎn)擊和它們的位置。

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>
    );
}