Next.js：在 Next.js 中只在伺服器端或客戶端執行程式碼

如何編寫僅在前端或後端其中一方執行的程式碼

在您的頁面組件中，您可以通過檢查window屬性來僅在伺服器端或客戶端執行程式碼。

該屬性僅在瀏覽器中存在，因此您可以進行檢查：

if (typeof window === 'undefined') {
}

並將伺服器端程式碼放入該區塊中。

同樣地，您可以通過檢查進行僅客戶端程式碼的執行：

if (typeof window !== 'undefined') {
}

JS提示：我們在這裡使用typeof運算符，因為我們無法以其他方式檢測到一個值是否未定義。我們不能做if (window === undefined)，因為這樣會得到一個“window is not defined”的運行時錯誤

作為構建時間優化，Next.js還會從bundles中刪除使用這些檢查的程式碼。客戶端bundle將不會包含包裹在if (typeof window === 'undefined') {}區塊中的內容。