“window is not defined”「視窗未定義」錯誤是開發人員在使用 Next.js 時經常遇到的問題。發生此錯誤的原因是 Next.js 同時伺服器和客戶端上執行，而window物件僅在客戶端 JavaScript 環境中可用。瞭解發生這種情況的原因以及如何解決它對於構建穩健的應用程式非常重要。在本文中，我們將探討“window is not defined”錯誤的根本原因，並討論在 Next.js 應用程式中修復該錯誤的各種方法。
為什麼會出現“window is not defined”錯誤？
在 Next.js 中，元件既可以在伺服器端渲染，也可以在客戶端渲染。代表瀏覽器視窗的window物件僅在客戶端環境（即瀏覽器中）中可用。當 Next.js 嘗試在伺服器上渲染元件時，對該window物件的任何引用都會導致錯誤，因為它在伺服器環境中不存在。
可能遇到此錯誤的常見情況包括：
在元件中直接訪問視窗或文件物件
使用依賴於瀏覽器特定 API 的庫，例如本地儲存或第三方指令碼。
提供三種解決方式
使用條件檢查
利用動態匯入
使用 useEffect Hooks
設定專案的步驟
步驟 1：在終端中使用給定的以下命令建立 NextJs 應用程式：
npx create-next-app@latest
第 2 步： 在您的專案中新增給定的程式碼
第 3 步：編寫給定的命令來執行應用程式：
cd my-next-js-app npm run dev
專案結構
package.json 檔案中更新後的依賴關係將如下所示：
"dependencies": {
"eslint": "8.57.0",
"eslint-config-next": "14.2.3",
"next": "14.2.3",
"react": "18.3.1",
"react-dom": "18.3.1"
}
示例： 執行下方語句，會復現問題
//app/MyComponent.js
"use client";
function MyComponent() {
const height = window.innerHeight;
return <div>My Component</div>;
}
export default MyComponent;
輸出
如何修復 Next.Js 中的“window is not defined”錯誤
方法 1：使用條件檢查
在訪問 window 的程式碼中加入條件檢查，以確保只在客戶端（瀏覽器）環境下執行。 該條件確保只有在瀏覽器環境中執行程式碼時纔會訪問 window。 在伺服器端渲染期間，window 不可用，因此該檢查可防止錯誤發生。
示例：使用條件檢查方法修復上述錯誤的實現方式
// app/page.js
"use client"
import MyComponent from "./MyComponent";
export default function Home() {
return (
<main>
<MyComponent />
</main>
)
}
輸出
如何修復 Next.Js 中的“window is not defined”錯誤
方法 2：利用動態匯入
如果要匯入引用 window 的模組，請使用動態匯入（import() 語法）而不是靜態匯入（import 語句），這樣可以將匯入延遲到定義了 window 的執行時。 如果您的元件或模組特別需要 window，並且只應在客戶端載入，那麼這種方法就很有用。
示例：利用動態匯入來修復上述錯誤的實現方式
// app/page.js
import dynamic from 'next/dynamic';
const MyComponent = dynamic(() => import('./MyComponent'), {
ssr: false // This ensures the component is not SSR'd
});
export default function Home() {
return (
<div>
<MyComponent />
</div>
);
}
輸出：
如何修復 Next.Js 中的“window is not defined”錯誤
方法 3：使用 useEffect Hooks
如果需要執行需要視窗的操作或初始化狀態，可考慮將 useEffect 與 useEffect 的依賴關係陣列結合使用，以確保某些操作僅在客戶端進行：
示例：使用 useEffect Hooks 修復上述錯誤的實現方式。
// app/page.js
"use client"
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const height = window.innerHeight;
console.log(height);
}, []);
return <div> Using useEffect Hooks</div>;
}
export default MyComponent;
輸出
如何修復 Next.Js 中的“window is not defined”錯誤
結論
透過使用條件檢查、動態匯入以及使用 useEffect 適當地處理 SSR 特定場景，您可以有效地修復 Next.js 應用程式中的“window is not defined”錯誤。這些策略可確保您的程式碼在伺服器端渲染和客戶端執行期間都能正常執行。
