Next.js添加到您的應用程序中的圖標

了解在開發模式下Next.js生成的圖標的含義

在使用Next.js應用程序時,您是否在頁面右下方看到一個小圖標,看起來像閃電?

如果您將其懸停,它將顯示“ Prerendered page”:

此圖標,這是僅在開發模式下可見當然,告訴您該頁面符合自動靜態優化的條件,這基本上意味著該頁面不依賴於需要在調用時獲取的數據,並且可以在構建時將其預呈現並構建為靜態HTML文件(當我們跑npm run build)。

接下來可以通過缺少getInitialProps()附加到頁面組件的方法。

在這種情況下,我們的頁面甚至可以更快,因為它將作為HTML文件靜態提供,而不是通過生成HTML輸出的Node.js服務器提供。

可能會出現在它旁邊的另一個有用圖標,或者代替它出現在非優先頁面上的是一個動畫三角形:

這是一個編譯指示符,當您保存頁面並且Next.js正在編譯應用程序之前,該提示會在熱代碼重新加載開始之前自動出現,以在應用程序中重新加載代碼。

這是一種非常好的方法,可以立即確定應用程序是否已經編譯,您可以測試正在處理的應用程序的一部分。

免費下載我的Next.js手冊


接下來的更多教程: