Next.js 添加的應用程式圖示

了解 Next.js 開發模式中生成的圖示的含義

在 Next.js 應用程式上工作時，您是否看到頁面右下角有一個小圖示，看起來像一道閃電？

如果將鼠標懸停在上面，它會顯示 “Prerendered page”：

這個圖示只在開發模式下可見，它告訴您該頁面符合自動靜態優化的條件，這基本上意味著它不依賴於必須在調用時獲取的數據，並且在構建時（運行 npm run build 時）可以預渲染並構建為靜態 HTML 文件。

Next.js 通過檢查頁面組件是否附加了 getInitialProps() 方法來確定這一點。

當這種情況發生時，我們的頁面會更快，因為它將以靜態 HTML 文件的形式提供，而不是通過生成 HTML 輸出的 Node.js 服務器。

可能會在它旁邊或非預渲染頁面上顯示的另一個有用的圖示是一個小的動畫三角形：

這是一個編譯指示器，在保存頁面並在 Next.js 編譯應用程式之前，熱代碼重新加載自動重新加載應用程式中的代碼之前，它會出現。

這是一種很好的方式，可以立即確定應用程式是否已編譯完畢，並且您可以測試正在工作的部分。