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

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

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

引言

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

使用useEffect鉤子

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

下面是一個(gè)簡(jiǎn)單應(yīng)用的示例代碼，它將用戶最后一次訪問網(wǎng)站的時(shí)間存儲(chǔ)在本地存儲(chǔ)中。如果你不熟悉在React或Next.js中使用localStorage，可以看看我們這里的這個(gè)教程，它使用了類似的方法。這個(gè)方法是相同的，但有一個(gè)小的區(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)行這個(gè)，我們得到這個(gè)你可能熟悉的錯(cuò)誤：

為了解決這個(gè)問題，讓我們引入一個(gè)自定義的鉤子，它涉及一個(gè) 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)把我們的邏輯移到了一個(gè)自定義的鉤子上，只是為了保持代碼的簡(jiǎn)潔?，F(xiàn)在隨著我們代碼的改變，代碼將只在鉤子運(yùn)行時(shí)運(yùn)行，也就是在客戶端。

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

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

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

檢查窗口是否被定義

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

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

在這個(gè)例子中，我們將為窗口對(duì)象添加一個(gè)事件監(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>
    );
}